atlas-react-kit 1.2.0 → 1.2.2

package/dist/form/field-shell.js

@@ -1,5 +1,8 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { pickerValueId } from "../internal/form-control.js";
+import { useId, } from "react";
+import { Slot } from "radix-ui";
+import { fieldNameProps, pickerValueId } from "../internal/form-control.js";
 import { Label } from "../label.js";
 import { cn } from "../utils.js";
 import { FieldError, getFieldErrorMessage, } from "./field-error.js";
@@ -13,27 +16,32 @@ import { FieldError, getFieldErrorMessage, } from "./field-error.js";
  * `showError` is false, or the field is untouched (`isTouched: false`)
  * and the form has not been submitted.
  */
-export function metaErrorText(meta, { submitted, showError = true } = {}) {
+function metaErrorText(meta, { submitted, showError = true } = {}) {
     if (!meta || !showError)
         return undefined;
     if (meta.isTouched === false && !submitted)
         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;
+/**
+ * The error text a `form/*` field shows (`metaErrorText`) and its control
+ * id. The id is generated per field, so two forms that share a field name
+ * (login and sign-up `email`) never share an id, and each label, hint, and
+ * error links to its own control.
+ */
+export function useFormField(meta, timing) {
+    return { id: useId(), errorText: metaErrorText(meta, timing) };
 }
 /** 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 +52,63 @@ 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.
+ * The date and date-time fields: `picker` (the trigger) in a
+ * `FormFieldShell`, given every prop of `field` the shell does not take. A
+ * button cannot carry `required`, so the trigger is described by the hidden
+ * "Required" text and reads "label, value".
  */
-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 FormPickerField({ field, picker: Picker, }) {
+    const { fieldName, label, meta, submitted, showError, required, fieldClassName, ...pickerProps } = field;
+    const { id, errorText } = useFormField(meta, { submitted, showError });
+    return (_jsx(FormFieldShell, { id: id, label: label, errorText: errorText, required: required, className: fieldClassName, children: _jsx(Picker, { ...pickerProps, id: id, ...fieldNameProps(fieldName), ...fieldAria(id, errorText, {
+                required: required && "described",
+                labelledBy: "label-value",
+            }) }) }));
+}
+/**
+ * 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 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/focus-first-invalid.d.ts

@@ -15,14 +15,17 @@ export type InvalidSubmitEvent = {
 /**
  * Invalid-submit handler that focuses the first field, in page order, whose
  * meta has errors. It reads the form state, not the rendered `aria-invalid`,
- * so it works before React has re-rendered. Fields are matched by control
- * id, so give each `form/*` field `id={field.name}` (`FormTextField`
- * defaults to it). The form library needs no focus API of its own.
+ * so it works before React has re-rendered. Fields are matched by the
+ * `data-field-name` each `form/*` field puts on its control: `FormTextField`
+ * and `FormMarkdownField` read `field.name`; the other fields take
+ * `fieldName={field.name}`. The lookup stays inside the form with id
+ * `formId`, so a second form with the same field names is never touched.
+ * The form library needs no focus API of its own.
  *
  * ```tsx
  * const form = useForm({ onSubmitInvalid: focusFirstInvalid("order-form") })
  * <form id="order-form" onSubmit={...}>
- *   <FormSelectField id={field.name} ... />
+ *   <FormSelectField fieldName={field.name} ... />
  * ```
  */
 export declare function focusFirstInvalid(formId: string): ({ formApi }: InvalidSubmitEvent) => void;

package/dist/form/focus-first-invalid.js

@@ -1,14 +1,18 @@
+import { FIELD_NAME_ATTRIBUTE } from "../internal/form-control.js";
 /**
  * Invalid-submit handler that focuses the first field, in page order, whose
  * meta has errors. It reads the form state, not the rendered `aria-invalid`,
- * so it works before React has re-rendered. Fields are matched by control
- * id, so give each `form/*` field `id={field.name}` (`FormTextField`
- * defaults to it). The form library needs no focus API of its own.
+ * so it works before React has re-rendered. Fields are matched by the
+ * `data-field-name` each `form/*` field puts on its control: `FormTextField`
+ * and `FormMarkdownField` read `field.name`; the other fields take
+ * `fieldName={field.name}`. The lookup stays inside the form with id
+ * `formId`, so a second form with the same field names is never touched.
+ * The form library needs no focus API of its own.
  *
  * ```tsx
  * const form = useForm({ onSubmitInvalid: focusFirstInvalid("order-form") })
  * <form id="order-form" onSubmit={...}>
- *   <FormSelectField id={field.name} ... />
+ *   <FormSelectField fieldName={field.name} ... />
  * ```
  */
 export function focusFirstInvalid(formId) {
@@ -19,8 +23,8 @@ export function focusFirstInvalid(formId) {
         const invalid = new Set(Object.entries(formApi.state.fieldMeta)
             .filter(([, meta]) => meta?.errors.length)
             .map(([name]) => name));
-        for (const element of form.elements) {
-            if (element instanceof HTMLElement && invalid.has(element.id)) {
+        for (const element of form.querySelectorAll(`[${FIELD_NAME_ATTRIBUTE}]`)) {
+            if (invalid.has(element.getAttribute(FIELD_NAME_ATTRIBUTE) ?? "")) {
                 element.focus();
                 return;
             }

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

@@ -3,7 +3,7 @@ import type { TextFieldBaseProps } 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, submitted, required, className, fieldClassName, previewClassName, }: TextFieldBaseProps & {
+export declare function FormMarkdownField({ field, label, placeholder, rows, showError, submitted, required, className, fieldClassName, previewClassName, }: TextFieldBaseProps & {
     /** Write textarea placeholder. Default "Markdown supported". */
     placeholder?: string;
     /** Write textarea rows. Default 5. */

package/dist/form/markdown-field.js

@@ -4,9 +4,10 @@ import { lazy, Suspense, useState } from "react";
 import { Spinner } from "../spinner.js";
 import { Textarea } from "../textarea.js";
 import { ToggleGroup, ToggleGroupItem } from "../toggle-group.js";
+import { fieldNameProps } from "../internal/form-control.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, useFormField } 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");
@@ -16,14 +17,17 @@ const Markdown = lazy(() => loadMarkdown().then((module) => ({ default: module.M
  * 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, submitted, required, className, fieldClassName, previewClassName, }) {
+export function FormMarkdownField({ field, label, placeholder = "Markdown supported", rows = 5, showError, submitted, required, className, fieldClassName, previewClassName, }) {
+    const { id, errorText } = useFormField(field.state.meta, {
+        submitted,
+        showError,
+    });
     const [mode, setMode] = useState("write");
     const onChange = onInputChange(field.handleChange);
-    const errorText = metaErrorText(field.state.meta, { submitted, showError });
     const trimmed = field.state.value.trim();
     function handleModeChange(value) {
         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, ...fieldNameProps(field.name), 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.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { FormFieldBaseProps, FormFieldMetaProps } from "./field-error.js";
 type Props = FormFieldBaseProps & FormFieldMetaProps & {
     /** The selected item's value, or `undefined` for none. */
@@ -7,12 +7,6 @@ type Props = FormFieldBaseProps & FormFieldMetaProps & {
     onValueChange: (value: string) => void;
     /** Trigger text while no item is selected. */
     placeholder?: string;
-    /**
-     * Id of the trigger the label points at. Defaults to a generated id;
-     * pass the field name (`id={field.name}`) so a submit handler such as
-     * `focusFirstInvalid` can find the control.
-     */
-    id?: string;
     /** Requires a value (native form validation) and marks the label. */
     required?: boolean;
     /** Forwarded to the select trigger. */
@@ -23,5 +17,5 @@ type Props = FormFieldBaseProps & FormFieldMetaProps & {
     children: ReactNode;
 };
 /** Select control with built-in field error text and invalid styling. */
-export declare function FormSelectField({ id: idProp, value, meta, submitted, showError, label, onValueChange, placeholder, required, className, fieldClassName, contentClassName, children, }: Props): import("react").JSX.Element;
+export declare function FormSelectField({ fieldName, value, meta, submitted, showError, label, onValueChange, placeholder, required, className, fieldClassName, contentClassName, children, }: Props): import("react").JSX.Element;
 export {};

package/dist/form/select-field.js

@@ -1,12 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { fieldNameProps } from "../internal/form-control.js";
 import { Select, SelectContent, SelectTrigger, SelectValue } from "../select.js";
-import { describedBy, FormFieldShell, invalidWhen, metaErrorText, } from "./field-shell.js";
+import { fieldAria, FormFieldShell, useFormField } 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 })] }) }));
+export function FormSelectField({ fieldName, value, meta, submitted, showError, label, onValueChange, placeholder, required, className, fieldClassName, contentClassName, children, }) {
+    const { id, errorText } = useFormField(meta, { submitted, showError });
+    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, ...fieldNameProps(fieldName), className: className, ...fieldAria(id, errorText, { required }), children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { className: contentClassName, children: children })] }) }));
 }

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

@@ -1,6 +1,6 @@
 import type { FieldMetaState, FormFieldBaseProps } from "./field-error.js";
 export type TextFieldApi = {
-    /** Field name; the default control id. */
+    /** Field name; put on the control as `data-field-name` for `focusFirstInvalid`. */
     name: string;
     state: {
         /** Current text. */
@@ -20,12 +20,6 @@ export type TextFieldApi = {
 export type TextFieldBaseProps = FormFieldBaseProps & {
     /** The TanStack Form field (or the same shape) the control reads and writes. */
     field: TextFieldApi;
-    /**
-     * Control id the label points at. Defaults to `field.name`; pass a unique
-     * id when two forms on one page share a field name (login and sign-up
-     * `email`), or the second label focuses the first input.
-     */
-    id?: string;
     /** Sets `required` on the text control and marks the label. */
     required?: boolean;
     /** Forwarded to the text control (the input or textarea). */
@@ -35,7 +29,7 @@ export type TextFieldBaseProps = FormFieldBaseProps & {
  * Text input, or a textarea with `multiline`, bound to a TanStack Form
  * `field`, with a label, optional hint, and the `form/*` error text.
  */
-export declare function FormTextField({ field, id, label, placeholder, description, autoFocus, multiline, rows, inputType, showError, submitted, autoComplete, required, minLength, className, fieldClassName, }: TextFieldBaseProps & {
+export declare function FormTextField({ field, label, placeholder, description, autoFocus, multiline, rows, inputType, showError, submitted, autoComplete, required, minLength, className, fieldClassName, }: TextFieldBaseProps & {
     /** Text shown in the empty control. */
     placeholder?: string;
     /** Optional hint under the label (employer vs referrer, etc.). */

package/dist/form/text-field.js

@@ -1,19 +1,23 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Input } from "../input.js";
+import { fieldNameProps } from "../internal/form-control.js";
 import { Textarea } from "../textarea.js";
 import { onInputChange } from "../utils.js";
-import { describedBy, descriptionIdFor, FormFieldShell, invalidWhen, metaErrorText, } from "./field-shell.js";
+import { fieldAria, FormFieldShell, useFormField } 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.
  */
-export function FormTextField({ field, id = field.name, label, placeholder, description, autoFocus, multiline, rows = 3, inputType = "text", showError, submitted, autoComplete, required, minLength, className, fieldClassName, }) {
+export function FormTextField({ field, label, placeholder, description, autoFocus, multiline, rows = 3, inputType = "text", showError, submitted, autoComplete, required, minLength, className, fieldClassName, }) {
+    const { id, errorText } = useFormField(field.state.meta, {
+        submitted,
+        showError,
+    });
     const onChange = onInputChange(field.handleChange);
-    const errorText = metaErrorText(field.state.meta, { submitted, showError });
-    const descriptionId = description ? descriptionIdFor(id) : undefined;
     const controlProps = {
         id,
+        ...fieldNameProps(field.name),
         value: field.state.value,
         onChange,
         onBlur: field.handleBlur,
@@ -22,8 +26,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.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 import type { FormFieldBaseProps, FormFieldDescriptionProps, FormFieldMetaProps } from "./field-error.js";
 export type ToggleGroupFieldOption<T extends string> = {
     /** Value passed to `onValueChange` when this item is pressed. */
@@ -26,5 +26,5 @@ type Props<T extends string> = FormFieldBaseProps & FormFieldMetaProps & FormFie
  * One choice from a few as a joined outline toggle group (a segmented
  * control), with a visible label and the `form/*` error wiring.
  */
-export declare function FormToggleGroupField<T extends string>({ label, description, value, onValueChange, options, meta, submitted, showError, required, disabled, size, className, fieldClassName, }: Props<T>): import("react").JSX.Element;
+export declare function FormToggleGroupField<T extends string>({ fieldName, label, description, value, onValueChange, options, meta, submitted, showError, required, disabled, size, className, fieldClassName, }: Props<T>): import("react").JSX.Element;
 export {};

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

@@ -1,19 +1,18 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useId } from "react";
+import { fieldNameProps } from "../internal/form-control.js";
 import { ToggleGroup, ToggleGroupItem } from "../toggle-group.js";
-import { describedBy, descriptionIdFor, FormFieldShell, invalidWhen, labelIdFor, metaErrorText, } from "./field-shell.js";
+import { fieldAria, FormFieldShell, useFormField } 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.
  */
-export function FormToggleGroupField({ label, description, value, onValueChange, options, meta, submitted, showError, required, disabled, size = "sm", className, fieldClassName, }) {
-    const id = useId();
-    const errorText = metaErrorText(meta, { submitted, showError });
+export function FormToggleGroupField({ fieldName, label, description, value, onValueChange, options, meta, submitted, showError, required, disabled, size = "sm", className, fieldClassName, }) {
+    const { id, errorText } = useFormField(meta, { submitted, showError });
     function handleValueChange(next) {
         const option = options.find((o) => o.value === next);
         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, ...fieldNameProps(fieldName), 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,11 @@ 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. `box` is a 44px button; after a label (any earlier
+     * sibling) its glyph sits that same quarter em from the text, so leave the
+     * gap off the parent. Default `box`.
      */
     layout?: InfoTipLayout;
     /** Panel side. Default `top`; Radix still flips on collision. */
@@ -29,8 +32,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,15 @@ 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.
+                    // Box: the 44px target leaves 12px either side of the 20px
+                    // glyph. After a label, pull it back over that padding so the
+                    // glyph sits the same quarter em from the text as it does inline.
+                    inline
+                        ? cn("ml-[0.25em] size-[1em] align-[-0.125em]", hitArea44)
+                        : "size-11 not-first:ml-[calc(0.25em-0.75rem)]", 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 +68,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,11 +12,17 @@ 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. */
 export declare const PICKER_COLLISION_PADDING = 16;
+/** Carries a field's name on its control, for `focusFirstInvalid`. */
+export declare const FIELD_NAME_ATTRIBUTE = "data-field-name";
+/** The props that mark a control with its field's name. */
+export declare function fieldNameProps(name: string | undefined): {
+    "data-field-name": string | undefined;
+};
 /**
  * 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".

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,11 +13,17 @@ 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. */
 export const PICKER_COLLISION_PADDING = 16;
+/** Carries a field's name on its control, for `focusFirstInvalid`. */
+export const FIELD_NAME_ATTRIBUTE = "data-field-name";
+/** The props that mark a control with its field's name. */
+export function fieldNameProps(name) {
+    return { [FIELD_NAME_ATTRIBUTE]: name };
+}
 /**
  * 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".

package/dist/internal/kanban-layout.js

@@ -1,3 +1,4 @@
+import { clamp } from "./math.js";
 /** Drop zone ids for the drag-time action rail. */
 export const KANBAN_COMPLETE_ID = "__kanban_complete__";
 export const KANBAN_DELETE_ID = "__kanban_delete__";
@@ -45,7 +46,7 @@ export function resolveKanbanDrop(input, groups) {
         return null;
     const columnItems = groups[toColumnId] ?? [];
     const remaining = columnItems.filter((id) => id !== itemId);
-    const index = Math.max(0, Math.min(rawIndex ?? remaining.length, remaining.length));
+    const index = clamp(rawIndex ?? remaining.length, 0, remaining.length);
     if (initialGroup === toColumnId && index === columnItems.indexOf(itemId)) {
         return null;
     }

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

@@ -12,19 +12,19 @@ export declare function listboxOptionId(listId: string, index: number): string;
 export declare function scrollOptionIntoView(node: HTMLElement | null): void;
 /**
  * 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).
+ * move the highlight over `items`, Enter picks the highlighted item. 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: {
+export declare function handleListboxKey<T>(event: {
     key: string;
     keyCode: number;
     nativeEvent: KeyboardEvent;
     preventDefault: () => void;
-}, { highlight, length, setHighlight, onEnter, }: {
+}, { items, highlight, setHighlight, onPick, }: {
+    items: readonly T[];
     highlight: number;
-    length: number;
     setHighlight: (index: number) => void;
-    onEnter: (index: number) => void;
+    onPick: (item: T) => void;
 }): boolean;