atlas-react-kit 1.1.0 → 1.2.1

package/dist/dropdown-menu.js

@@ -3,11 +3,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { CheckIcon, ChevronRightIcon } from "lucide-react";
-import { menuLabel, optionIcon, optionRow, overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
-import { dataDisabledState, optionState } from "./internal/styles.js";
+import { menuLabel, optionRow, OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET, overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
+import { dataDisabledState, inlineIcon, optionState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /** Menu row: the shared option row with menu padding and the inset slot. */
-const menuItemClassName = cn(optionRow, optionState.focus, dataDisabledState, optionIcon, "pr-3 data-inset:pl-9");
+const menuItemClassName = cn(optionRow, optionState.focus, dataDisabledState, inlineIcon.default, "pr-3 data-inset:pl-9");
 const menuContentClassName = cn(overlaySurface, overlaySideSlide, overlayFadeZoom, "z-50 overflow-x-hidden overflow-y-auto p-1");
 /** Action menu for commands (row actions, overflow menus). Use `Select` to pick a value. */
 function DropdownMenu({ ...props }) {
@@ -19,7 +19,7 @@ function DropdownMenuPortal({ ...props }) {
 function DropdownMenuTrigger({ ...props }) {
     return (_jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props }));
 }
-function DropdownMenuContent({ className, align = "start", sideOffset = 4, collisionPadding = 8, ...props }) {
+function DropdownMenuContent({ className, align = "start", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, ...props }) {
     return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn(menuContentClassName, "max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin)", className), ...props }) }));
 }
 function DropdownMenuGroup({ ...props }) {

package/dist/field.d.ts

@@ -31,10 +31,13 @@ declare function FieldSeparator({ children, className, ...props }: React.Compone
     /** Optional text shown in a gap in the middle of the line, e.g. "Or". */
     children?: React.ReactNode;
 }): import("react").JSX.Element;
+/** One error as form libraries report it; `FieldError` shows its `message`. */
+type FieldErrorItem = {
+    message?: string;
+} | undefined;
 declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
     /** Errors to list, deduplicated by message; `children` replaces them. */
-    errors?: Array<{
-        message?: string;
-    } | undefined>;
+    errors?: FieldErrorItem[];
 }): import("react").JSX.Element | null;
 export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };
+export type { FieldErrorItem };

package/dist/field.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { cva } from "class-variance-authority";
+import { labelText } from "./internal/styles.js";
 import { cn } from "./utils.js";
 import { Label } from "./label.js";
 import { Separator } from "./separator.js";
@@ -9,7 +10,7 @@ function FieldSet({ className, ...props }) {
     return (_jsx("fieldset", { "data-slot": "field-set", className: cn("flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className), ...props }));
 }
 function FieldLegend({ className, variant = "legend", ...props }) {
-    return (_jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("mb-3 font-semibold uppercase data-[variant=label]:text-xs data-[variant=legend]:text-xs", className), ...props }));
+    return (_jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn("mb-3", labelText, className), ...props }));
 }
 /**
  * Stack of fields and the `@container/field-group` that responsive fields
@@ -49,7 +50,7 @@ function FieldLabel({ className, ...props }) {
     return (_jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-selected has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-selected", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className), ...props }));
 }
 function FieldTitle({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "field-label", className: cn("flex w-fit items-center gap-2 text-xs font-semibold uppercase group-data-[disabled=true]/field:opacity-50 in-data-[slot=field-label]:font-semibold", className), ...props }));
+    return (_jsx("div", { "data-slot": "field-label", className: cn(labelText, "flex w-fit items-center gap-2 group-data-[disabled=true]/field:opacity-50 in-data-[slot=field-label]:font-semibold", className), ...props }));
 }
 function FieldDescription({ className, ...props }) {
     return (_jsx("p", { "data-slot": "field-description", className: cn("text-left text-sm leading-normal font-normal tracking-normal text-muted-foreground normal-case group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-selected-foreground", className), ...props }));

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

@@ -1,4 +1,4 @@
-import { type FormFieldBaseProps, type FormFieldDescriptionProps, type FormFieldMetaProps } from "./field-error.js";
+import type { FormFieldBaseProps, FormFieldDescriptionProps, FormFieldMetaProps } from "./field-error.js";
 type CheckboxFieldProps = FormFieldBaseProps & FormFieldMetaProps & FormFieldDescriptionProps & {
     /** Whether the box is checked. */
     checked: boolean;

package/dist/form/checkbox-field.js

@@ -2,10 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { Checkbox } from "../checkbox.js";
-import { Field, FieldContent, FieldDescription, FieldLabel, FieldLegend, FieldSet, } from "../field.js";
+import { Field, FieldContent, FieldLabel, FieldLegend } from "../field.js";
 import { cn } from "../utils.js";
-import { FieldError, } from "./field-error.js";
-import { describedBy, descriptionIdFor, errorIdFor, invalidWhen, metaErrorText, } from "./field-shell.js";
+import { fieldAria, FormFieldDescription, FormFieldFrame, metaErrorText, } from "./field-shell.js";
 /**
  * One boolean as a labelled checkbox, with an optional hint and the same
  * error text and timing as the other `form/*` fields.
@@ -14,16 +13,14 @@ export function FormCheckboxField({ checked, onCheckedChange, onBlur, label, des
     const generatedId = useId();
     const id = idProp ?? generatedId;
     const errorText = metaErrorText(meta, { submitted, showError });
-    const descriptionId = description ? descriptionIdFor(id) : undefined;
-    const checkbox = (_jsx(Checkbox, { id: id, checked: checked, onCheckedChange: (next) => onCheckedChange(next === true), onBlur: onBlur, disabled: disabled, required: required, "aria-required": required || undefined, "aria-invalid": invalidWhen(errorText), "aria-describedby": describedBy(id, errorText, descriptionId), className: className }));
+    const checkbox = (_jsx(Checkbox, { id: id, checked: checked, onCheckedChange: (next) => onCheckedChange(next === true), onBlur: onBlur, disabled: disabled, required: required, ...fieldAria(id, errorText, { description, required }), className: className }));
     const labelNode = (_jsx(FieldLabel, { htmlFor: id, required: required, children: label }));
-    return (_jsxs("div", { "data-slot": "form-field", className: cn("flex flex-col gap-1.5", fieldClassName), children: [_jsxs(Field, { orientation: "horizontal", children: [controlPosition === "start" ? checkbox : null, description ? (_jsxs(FieldContent, { children: [labelNode, _jsx(FieldDescription, { id: descriptionId, children: description })] })) : (labelNode), controlPosition === "end" ? checkbox : null] }), _jsx(FieldError, { id: errorIdFor(id), text: errorText })] }));
+    return (_jsx(FormFieldFrame, { id: id, errorText: errorText, className: fieldClassName, children: _jsxs(Field, { orientation: "horizontal", children: [controlPosition === "start" ? checkbox : null, description ? (_jsxs(FieldContent, { children: [labelNode, _jsx(FormFieldDescription, { id: id, children: description })] })) : (labelNode), controlPosition === "end" ? checkbox : null] }) }));
 }
 /** Several values from a short list, as a labelled set of checkboxes. */
 export function FormCheckboxGroupField({ label, description, options, value, onValueChange, meta, submitted, showError, disabled, className, fieldClassName, }) {
     const id = useId();
     const errorText = metaErrorText(meta, { submitted, showError });
-    const descriptionId = description ? descriptionIdFor(id) : undefined;
     function toggle(option, on) {
         const next = new Set(value);
         if (on)
@@ -32,8 +29,8 @@ export function FormCheckboxGroupField({ label, description, options, value, onV
             next.delete(option);
         onValueChange(options.map((o) => o.value).filter((v) => next.has(v)));
     }
-    return (_jsxs(FieldSet, { "data-slot": "form-field", "aria-invalid": invalidWhen(errorText), "aria-describedby": describedBy(id, errorText, descriptionId), className: cn("gap-1.5", fieldClassName), children: [_jsx(FieldLegend, { variant: "label", className: "mb-0", children: label }), description ? (_jsx("p", { id: descriptionId, "data-slot": "form-field-description", className: "text-xs text-muted-foreground", children: description })) : null, _jsx("div", { "data-slot": "form-checkbox-group-options", className: cn("flex flex-wrap gap-x-6 gap-y-3 pt-1", className), children: options.map((option) => {
-                    const optionId = `${id}-${option.value}`;
-                    return (_jsxs(Field, { orientation: "horizontal", children: [_jsx(Checkbox, { id: optionId, checked: value.includes(option.value), onCheckedChange: (next) => toggle(option.value, next === true), disabled: disabled }), _jsx(FieldLabel, { htmlFor: optionId, children: option.label })] }, option.value));
-                }) }), _jsx(FieldError, { id: errorIdFor(id), text: errorText })] }));
+    return (_jsx(FormFieldFrame, { asChild: true, id: id, errorText: errorText, className: fieldClassName, children: _jsxs("fieldset", { ...fieldAria(id, errorText, { description }), children: [_jsx(FieldLegend, { variant: "label", className: "mb-0", children: label }), description ? (_jsx(FormFieldDescription, { id: id, children: description })) : null, _jsx("div", { "data-slot": "form-checkbox-group-options", className: cn("flex flex-wrap gap-x-6 gap-y-3 pt-1", className), children: options.map((option) => {
+                        const optionId = `${id}-${option.value}`;
+                        return (_jsxs(Field, { orientation: "horizontal", children: [_jsx(Checkbox, { id: optionId, checked: value.includes(option.value), onCheckedChange: (next) => toggle(option.value, next === true), disabled: disabled }), _jsx(FieldLabel, { htmlFor: optionId, children: option.label })] }, option.value));
+                    }) })] }) }));
 }

package/dist/form/combobox-field.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useId } from "react";
 import { Combobox } from "../combobox.js";
-import { describedBy, descriptionIdFor, FormFieldShell, invalidWhen, metaErrorText, } from "./field-shell.js";
+import { fieldAria, FormFieldShell, metaErrorText } from "./field-shell.js";
 /**
  * `Combobox` with a label, optional hint, and the `form/*` error text and
  * timing. Pass the field's blur handler as `onBlur` so touch state updates.
@@ -10,5 +10,5 @@ import { describedBy, descriptionIdFor, FormFieldShell, invalidWhen, metaErrorTe
 export function FormComboboxField({ label, description, meta, submitted, showError, required, fieldClassName, ...props }) {
     const id = useId();
     const errorText = metaErrorText(meta, { submitted, showError });
-    return (_jsx(FormFieldShell, { id: id, label: label, description: description, errorText: errorText, required: required, className: fieldClassName, children: _jsx(Combobox, { ...props, id: id, "aria-required": required || undefined, "aria-invalid": invalidWhen(errorText), "aria-describedby": describedBy(id, errorText, description ? descriptionIdFor(id) : undefined) }) }));
+    return (_jsx(FormFieldShell, { id: id, label: label, description: description, errorText: errorText, required: required, className: fieldClassName, children: _jsx(Combobox, { ...props, id: id, ...fieldAria(id, errorText, { description, required }) }) }));
 }

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

@@ -3,18 +3,12 @@ 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, hitArea44 } from "./internal/styles.js";
+import { focusRing, hitArea44, quietTextHover } from "./internal/styles.js";
+import { HOVER_MEDIA_QUERY, useMediaQuery } from "./internal/use-media-query.js";
 import { cn } from "./utils.js";
 /**
- * True when a mouse can hover. Touch and coarse pointers must use click;
- * a hover-open popover would trap them after the first tap.
- */
-function canHoverOpen() {
-    return window.matchMedia("(hover: hover) and (pointer: fine)").matches;
-}
-/**
- * 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 }) {
@@ -25,6 +19,8 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
     const openedBy = React.useRef(null);
     const titleId = React.useId();
     const inline = layout === "inline";
+    // Hover opens only for a pointer that can hover; touch must click.
+    const canHoverOpen = useMediaQuery(HOVER_MEDIA_QUERY);
     const cancelClose = () => {
         if (closeTimer.current !== null) {
             window.clearTimeout(closeTimer.current);
@@ -32,7 +28,7 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
         }
     };
     const openFromHover = () => {
-        if (!canHoverOpen())
+        if (!canHoverOpen)
             return;
         cancelClose();
         if (open)
@@ -41,7 +37,7 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
         setOpen(true);
     };
     const closeFromHover = () => {
-        if (!canHoverOpen() || openedBy.current !== "hover")
+        if (!canHoverOpen || openedBy.current !== "hover")
             return;
         cancelClose();
         // Leave a beat so the pointer can travel from the glyph into the panel.
@@ -55,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 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) => {
+        }, 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.
@@ -64,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) => {