atlas-react-kit 1.0.0 → 1.1.0

package/dist/date-time-picker.js

@@ -2,8 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { format } from "date-fns";
-import { LazyCalendar } from "./lazy-calendar.js";
-import { PickerClearFooter, PickerShell, limitCalendarProps, } from "./picker-shell.js";
+import { PickerShell } from "./picker-shell.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "./select.js";
 /** Default clock increment, in minutes. Must divide 60. */
 export const DEFAULT_TIME_STEP = 15;
@@ -48,18 +47,6 @@ function minuteOptions(step, current) {
     return minutes;
 }
 const HOUR_OPTIONS = Array.from({ length: 24 }, (_, hour) => padTimePart(hour));
-/**
- * Keep the date-time popover open when a portaled Select option is clicked.
- * Select content renders outside the popover, so Radix would otherwise treat
- * that pointer down as an outside dismiss.
- */
-function preventDismissForPortaledSelect(event) {
-    const target = event.target;
-    if (target instanceof Element &&
-        target.closest("[data-slot=select-content]")) {
-        event.preventDefault();
-    }
-}
 /**
  * Calendar plus hour/minute popover trigger styled as a form control (same
  * chrome as Input, SelectTrigger, and DatePickerButton). `value` is a `Date`
@@ -68,33 +55,32 @@ function preventDismissForPortaledSelect(event) {
  * stays on-screen at a 390px width. `className` styles the trigger,
  * `contentClassName` the popover, and `calendarProps` reaches Day Picker.
  */
-export function DateTimePickerButton({ value, onValueChange, onChange, timeStep, placeholder = "Pick a date and time", defaultMonth, calendarProps, minDate, maxDate, ...shell }) {
+export function DateTimePickerButton({ value, onValueChange, onChange, timeStep, placeholder = "Pick a date and time", defaultMonth, ...shell }) {
     const [open, setOpen] = React.useState(false);
     const emit = onValueChange ?? onChange;
     const date = value ?? null;
     const step = resolveTimeStep(timeStep);
     const empty = date == null;
-    const hourId = React.useId();
-    const minuteId = React.useId();
-    return (_jsxs(PickerShell, { ...shell, empty: empty, label: date ? format(date, "PPP p") : placeholder, dialogLabel: "Choose date and time", open: open, onOpenChange: setOpen, onInteractOutside: preventDismissForPortaledSelect, children: [_jsx(LazyCalendar, { ...limitCalendarProps(calendarProps, minDate, maxDate), mode: "single", autoFocus: true, selected: date ?? undefined, defaultMonth: defaultMonth ?? date ?? undefined, onSelect: (next) => {
-                    // Re-clicking a selected day would clear it; require Clear instead
-                    // so a time already set is not dropped by an accidental second tap.
-                    if (!next)
-                        return;
-                    emit?.(combineDateAndTime(next, date?.getHours() ?? 0, date?.getMinutes() ?? 0));
-                } }), _jsxs("div", { role: "group", "aria-label": "Time", "data-slot": "date-time-picker-time", className: "flex min-w-0 flex-col gap-2 border-t p-3", children: [_jsx("p", { className: "text-xs font-semibold tracking-wide uppercase", children: "Time" }), _jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsxs(Select, { value: date ? padTimePart(date.getHours()) : undefined, onValueChange: (nextHour) => {
-                                    if (!date)
-                                        return;
-                                    emit?.(combineDateAndTime(date, Number(nextHour), date.getMinutes()));
-                                }, disabled: empty, children: [_jsx(SelectTrigger, { id: hourId, "aria-label": "Hour", className: "min-w-0 flex-1", children: _jsx(SelectValue, { placeholder: "\u2013\u2013" }) }), _jsx(SelectContent, { children: HOUR_OPTIONS.map((hour) => (_jsx(SelectItem, { value: hour, children: hour }, hour))) })] }), _jsx("span", { className: "text-muted-foreground", "aria-hidden": "true", children: ":" }), _jsxs(Select, { value: date ? padTimePart(date.getMinutes()) : undefined, onValueChange: (nextMinute) => {
-                                    if (!date)
-                                        return;
-                                    emit?.(combineDateAndTime(date, date.getHours(), Number(nextMinute)));
-                                }, disabled: empty, children: [_jsx(SelectTrigger, { id: minuteId, "aria-label": "Minute", className: "min-w-0 flex-1", children: _jsx(SelectValue, { placeholder: "\u2013\u2013" }) }), _jsx(SelectContent, { children: minuteOptions(step, date?.getMinutes()).map((minute) => {
-                                            const value = padTimePart(minute);
-                                            return (_jsx(SelectItem, { value: value, children: value }, value));
-                                        }) })] })] })] }), _jsx(PickerClearFooter, { disabled: empty, onClear: () => {
-                    emit?.(null);
-                    setOpen(false);
-                } })] }));
+    return (_jsx(PickerShell, { ...shell, empty: empty, label: date ? format(date, "PPP p") : placeholder, dialogLabel: "Choose date and time", open: open, onOpenChange: setOpen, defaultMonth: defaultMonth ?? date ?? undefined, calendar: {
+            mode: "single",
+            selected: date ?? undefined,
+            onSelect: (next) => {
+                // Re-clicking a selected day would clear it; require Clear instead
+                // so a time already set is not dropped by an accidental second tap.
+                if (!next)
+                    return;
+                emit?.(combineDateAndTime(next, date?.getHours() ?? 0, date?.getMinutes() ?? 0));
+            },
+        }, onClear: () => emit?.(null), clearDisabled: empty, children: _jsxs("div", { role: "group", "aria-label": "Time", "data-slot": "date-time-picker-time", className: "flex min-w-0 flex-col gap-2 border-t p-3", children: [_jsx("p", { className: "text-xs font-semibold tracking-wide uppercase", children: "Time" }), _jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsxs(Select, { value: date ? padTimePart(date.getHours()) : undefined, onValueChange: (nextHour) => {
+                                if (!date)
+                                    return;
+                                emit?.(combineDateAndTime(date, Number(nextHour), date.getMinutes()));
+                            }, disabled: empty, children: [_jsx(SelectTrigger, { "aria-label": "Hour", className: "min-w-0 flex-1", children: _jsx(SelectValue, { placeholder: "\u2013\u2013" }) }), _jsx(SelectContent, { children: HOUR_OPTIONS.map((hour) => (_jsx(SelectItem, { value: hour, children: hour }, hour))) })] }), _jsx("span", { className: "text-muted-foreground", "aria-hidden": "true", children: ":" }), _jsxs(Select, { value: date ? padTimePart(date.getMinutes()) : undefined, onValueChange: (nextMinute) => {
+                                if (!date)
+                                    return;
+                                emit?.(combineDateAndTime(date, date.getHours(), Number(nextMinute)));
+                            }, disabled: empty, children: [_jsx(SelectTrigger, { "aria-label": "Minute", className: "min-w-0 flex-1", children: _jsx(SelectValue, { placeholder: "\u2013\u2013" }) }), _jsx(SelectContent, { children: minuteOptions(step, date?.getMinutes()).map((minute) => {
+                                        const value = padTimePart(minute);
+                                        return (_jsx(SelectItem, { value: value, children: value }, value));
+                                    }) })] })] })] }) }));
 }

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

@@ -7,7 +7,12 @@ type Props = PickerFieldBaseProps & {
     onValueChange: (date: Date | undefined) => void;
     /** Trigger text while no day is picked. Default "Pick a date". */
     placeholder?: string;
+    /**
+     * Shows a Clear row in the popover, which calls `onValueChange` with
+     * `undefined`. Default `false`.
+     */
+    clearable?: boolean;
 };
 /** Date picker with built-in field error text and invalid styling. */
-export declare function FormDatePickerField({ onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }: Props): import("react").JSX.Element;
+export declare function FormDatePickerField({ id: idProp, onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }: Props): import("react").JSX.Element;
 export {};

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

@@ -4,8 +4,9 @@ import { useId } from "react";
 import { DatePickerButton } from "../date-picker.js";
 import { FormFieldShell, metaErrorText, pickerFieldAria, } from "./field-shell.js";
 /** Date picker with built-in field error text and invalid styling. */
-export function FormDatePickerField({ onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }) {
+export function FormDatePickerField({ id: idProp, onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }) {
     const errorText = metaErrorText(meta, { submitted, showError });
-    const id = useId();
+    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) }) }));
 }

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

@@ -10,5 +10,5 @@ type Props = PickerFieldBaseProps & {
     timeStep?: number;
 };
 /** Date-time picker with built-in field error text and invalid styling. */
-export declare function FormDateTimePickerField({ onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }: Props): import("react").JSX.Element;
+export declare function FormDateTimePickerField({ id: idProp, onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }: Props): import("react").JSX.Element;
 export {};

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

@@ -4,8 +4,9 @@ import { useId } from "react";
 import { DateTimePickerButton } from "../date-time-picker.js";
 import { FormFieldShell, metaErrorText, pickerFieldAria, } from "./field-shell.js";
 /** Date-time picker with built-in field error text and invalid styling. */
-export function FormDateTimePickerField({ onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }) {
+export function FormDateTimePickerField({ id: idProp, onValueChange, label, meta, submitted, showError, required, fieldClassName, ...picker }) {
     const errorText = metaErrorText(meta, { submitted, showError });
-    const id = useId();
+    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) }) }));
 }

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

@@ -16,9 +16,10 @@ export type FieldMetaState = {
 /** When a field shows its error: the `form/*` fields' shared timing props. */
 export type ErrorTimingProps = {
     /**
-     * Set once the form has been submitted (TanStack Form:
-     * `form.state.submissionAttempts > 0`), so an untouched field shows its
-     * error too. Only matters when `meta.isTouched` is passed.
+     * Set once the form has been submitted, so an untouched field shows its
+     * error too. For form libraries that do not mark fields touched on
+     * submit; TanStack Form does, so its users pass `meta` only. Only matters
+     * when `meta.isTouched` is passed.
      */
     submitted?: boolean;
     /** When false, never shows error text or invalid styling. Default true. */

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

@@ -20,11 +20,6 @@ export declare function labelIdFor(id: string): string;
 export declare function descriptionIdFor(id: string): string;
 /** Id of the error text `FormFieldShell` renders for control `id`. */
 export declare function errorIdFor(id: string): string;
-/**
- * Id of the hidden "Required" text `FormFieldShell` renders for a required
- * control `id`, for controls that cannot carry `required` themselves.
- */
-export declare function requiredIdFor(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.
@@ -35,6 +30,12 @@ export declare function describedBy(id: string, errorText: string | undefined, .
  * `onValueChange`, and `placeholder`.
  */
 export type PickerFieldBaseProps = FormFieldBaseProps & FormFieldMetaProps & {
+    /**
+     * 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;
     /** Disables the trigger so no date can be picked. */
     disabled?: boolean;
     /** Marks the label and adds "Required" to the trigger's description. */

package/dist/form/field-shell.js

@@ -40,7 +40,7 @@ export function errorIdFor(id) {
  * Id of the hidden "Required" text `FormFieldShell` renders for a required
  * control `id`, for controls that cannot carry `required` themselves.
  */
-export function requiredIdFor(id) {
+function requiredIdFor(id) {
     return `${id}-required`;
 }
 /**

package/dist/form/focus-first-invalid.d.ts

@@ -0,0 +1,28 @@
+/**
+ * The part of a form library's invalid-submit event this helper reads: the
+ * form state's per-field meta, keyed by field name (TanStack Form's
+ * `onSubmitInvalid` passes `{ formApi }` with this shape).
+ */
+export type InvalidSubmitEvent = {
+    formApi: {
+        state: {
+            fieldMeta: Partial<Record<string, {
+                errors: readonly unknown[];
+            }>>;
+        };
+    };
+};
+/**
+ * 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.
+ *
+ * ```tsx
+ * const form = useForm({ onSubmitInvalid: focusFirstInvalid("order-form") })
+ * <form id="order-form" onSubmit={...}>
+ *   <FormSelectField id={field.name} ... />
+ * ```
+ */
+export declare function focusFirstInvalid(formId: string): ({ formApi }: InvalidSubmitEvent) => void;

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

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ *
+ * ```tsx
+ * const form = useForm({ onSubmitInvalid: focusFirstInvalid("order-form") })
+ * <form id="order-form" onSubmit={...}>
+ *   <FormSelectField id={field.name} ... />
+ * ```
+ */
+export function focusFirstInvalid(formId) {
+    return ({ formApi }) => {
+        const form = document.getElementById(formId);
+        if (!(form instanceof HTMLFormElement))
+            return;
+        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)) {
+                element.focus();
+                return;
+            }
+        }
+    };
+}

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

@@ -7,6 +7,12 @@ 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. */
@@ -17,5 +23,5 @@ type Props = FormFieldBaseProps & FormFieldMetaProps & {
     children: ReactNode;
 };
 /** Select control with built-in field error text and invalid styling. */
-export declare function FormSelectField({ value, meta, submitted, showError, label, onValueChange, placeholder, required, className, fieldClassName, contentClassName, children, }: Props): import("react").JSX.Element;
+export declare function FormSelectField({ id: idProp, value, meta, submitted, showError, label, onValueChange, placeholder, required, className, fieldClassName, contentClassName, children, }: Props): import("react").JSX.Element;
 export {};

package/dist/form/select-field.js

@@ -4,8 +4,9 @@ import { useId } from "react";
 import { Select, SelectContent, SelectTrigger, SelectValue } from "../select.js";
 import { describedBy, FormFieldShell, invalidWhen, metaErrorText, } from "./field-shell.js";
 /** Select control with built-in field error text and invalid styling. */
-export function FormSelectField({ value, meta, submitted, showError, label, onValueChange, placeholder, required, className, fieldClassName, contentClassName, children, }) {
+export function FormSelectField({ id: idProp, value, meta, submitted, showError, label, onValueChange, placeholder, required, className, fieldClassName, contentClassName, children, }) {
     const errorText = metaErrorText(meta, { submitted, showError });
-    const id = useId();
+    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 })] }) }));
 }

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

@@ -1,5 +1,3 @@
-/** Return the next highlighted index for a listbox navigation key. */
-export declare function moveListboxHighlight(key: string, index: number, length: number): number | undefined;
 /**
  * Option id for `aria-activedescendant`. Index-based because option values
  * may contain spaces, which are not valid in an id reference.
@@ -12,15 +10,6 @@ export declare function listboxOptionId(listId: string, index: number): string;
  * so the ref is stable without `useCallback`.
  */
 export declare function scrollOptionIntoView(node: HTMLElement | null): void;
-/**
- * True while an IME is composing (Japanese, Chinese, Korean input). Enter
- * then commits the composition and must not select an option. `keyCode`
- * 229 covers Safari, which ends composition before the keydown.
- */
-export declare function isComposingKey(event: {
-    nativeEvent: KeyboardEvent;
-    keyCode: number;
-}): boolean;
 /**
  * Shared keydown for a search input that drives a listbox: navigation keys
  * move the highlight, Enter picks the highlighted index. Returns `true` when

package/dist/internal/listbox-navigation.js

@@ -1,7 +1,7 @@
 /** Page keys move ten rows, a little more than one max-h-60 list viewport. */
 const PAGE_SIZE = 10;
 /** Return the next highlighted index for a listbox navigation key. */
-export function moveListboxHighlight(key, index, length) {
+function moveListboxHighlight(key, index, length) {
     switch (key) {
         case "ArrowDown":
             return length === 0 ? 0 : Math.min(index + 1, length - 1);
@@ -40,7 +40,7 @@ export function scrollOptionIntoView(node) {
  * then commits the composition and must not select an option. `keyCode`
  * 229 covers Safari, which ends composition before the keydown.
  */
-export function isComposingKey(event) {
+function isComposingKey(event) {
     return event.nativeEvent.isComposing || event.keyCode === 229;
 }
 /**

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

@@ -1,19 +1,4 @@
 import * as React from "react";
-type ListboxOptionProps = Omit<React.ComponentProps<"button">, "id" | "role" | "type" | "tabIndex" | "aria-selected"> & {
-    /** The listbox id; the option id derives from it for aria-activedescendant. */
-    listId: string;
-    index: number;
-    /** Keyboard or pointer highlight (tracked in state, not DOM focus). */
-    active: boolean;
-    selected: boolean;
-};
-/**
- * One option of a search-driven listbox (Combobox, SearchPicker): a
- * non-focusable button in a presentational `li`, highlighted by state and
- * scrolled into view while active. Pass `data-slot`, handlers, and the
- * component's right padding and indicator.
- */
-export declare function ListboxOption({ listId, index, active, selected, className, ...props }: ListboxOptionProps): React.JSX.Element;
 type PickerOptionProps<T> = {
     item: T;
     getLabel: (item: T) => string;

package/dist/internal/listbox-option.js

@@ -11,7 +11,7 @@ import { listboxEmpty, optionState } from "./styles.js";
  * scrolled into view while active. Pass `data-slot`, handlers, and the
  * component's right padding and indicator.
  */
-export function ListboxOption({ listId, index, active, selected, className, ...props }) {
+function ListboxOption({ listId, index, active, selected, className, ...props }) {
     return (_jsx("li", { role: "none", children: _jsx("button", { ref: active ? scrollOptionIntoView : undefined, id: listboxOptionId(listId, index), type: "button", role: "option", tabIndex: -1, "aria-selected": selected, className: cn(optionRow, selected && optionState.selected, active && optionState.active, className), ...props }) }));
 }
 /** Only the old and new active rows rerender during keyboard navigation. */

package/dist/internal/use-drag-scroll.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+/** Pointer travel, in px, before a press on the scroller counts as a drag. */
+export declare const DRAG_THRESHOLD = 4;
+/**
+ * Lets a mouse drag a horizontal scroller sideways, the way touch already
+ * does natively. Mouse only (`pointerType === "mouse"`, left button); touch
+ * and pen keep the browser's own scrolling. A press becomes a drag after
+ * `DRAG_THRESHOLD` px of travel, so a plain click on a tab or link still
+ * activates it; once a drag has moved, the click after pointerup is
+ * swallowed so the drag never also follows a link. (Radix `TabsTrigger`
+ * selects on mousedown, so a drag that starts on an inactive tab still
+ * selects that tab on press.)
+ *
+ * Listens only while `enabled` (the scroller overflows): a row that fits
+ * behaves exactly as before. Keyboard scrolling is untouched.
+ */
+export declare function useDragScroll(ref: React.RefObject<HTMLElement | null>, enabled: boolean): void;

package/dist/internal/use-drag-scroll.js

@@ -0,0 +1,98 @@
+"use client";
+import * as React from "react";
+/** Pointer travel, in px, before a press on the scroller counts as a drag. */
+export const DRAG_THRESHOLD = 4;
+/**
+ * Lets a mouse drag a horizontal scroller sideways, the way touch already
+ * does natively. Mouse only (`pointerType === "mouse"`, left button); touch
+ * and pen keep the browser's own scrolling. A press becomes a drag after
+ * `DRAG_THRESHOLD` px of travel, so a plain click on a tab or link still
+ * activates it; once a drag has moved, the click after pointerup is
+ * swallowed so the drag never also follows a link. (Radix `TabsTrigger`
+ * selects on mousedown, so a drag that starts on an inactive tab still
+ * selects that tab on press.)
+ *
+ * Listens only while `enabled` (the scroller overflows): a row that fits
+ * behaves exactly as before. Keyboard scrolling is untouched.
+ */
+export function useDragScroll(ref, enabled) {
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!element || !enabled)
+            return;
+        let pointerId = null;
+        let startX = 0;
+        let startScrollLeft = 0;
+        let dragged = false;
+        const onPointerDown = (event) => {
+            if (event.pointerType !== "mouse" || event.button !== 0)
+                return;
+            pointerId = event.pointerId;
+            startX = event.clientX;
+            startScrollLeft = element.scrollLeft;
+            dragged = false;
+        };
+        const onPointerMove = (event) => {
+            if (pointerId === null || event.pointerId !== pointerId)
+                return;
+            if ((event.buttons & 1) === 0) {
+                // The button came up outside the scroller before capture.
+                pointerId = null;
+                return;
+            }
+            const delta = event.clientX - startX;
+            if (!dragged) {
+                if (Math.abs(delta) < DRAG_THRESHOLD)
+                    return;
+                dragged = true;
+                // Keep the moves and the up when the pointer leaves the box. The
+                // browser releases capture on pointerup and pointercancel.
+                element.setPointerCapture(event.pointerId);
+            }
+            element.scrollLeft = startScrollLeft - delta;
+        };
+        const onPointerUp = (event) => {
+            if (event.pointerId !== pointerId)
+                return;
+            pointerId = null;
+            // `dragged` stays set so the click that follows is swallowed.
+        };
+        const onPointerCancel = (event) => {
+            if (event.pointerId !== pointerId)
+                return;
+            pointerId = null;
+            // No click follows a cancel, so the next real click must go through.
+            dragged = false;
+        };
+        // Capture phase, so it runs before the link's or trigger's own handler.
+        const onClick = (event) => {
+            if (!dragged)
+                return;
+            dragged = false;
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        // Links are draggable by default: a native drag would cancel the pointer.
+        // A text selection started in the row would smear across the labels.
+        const onDragOrSelectStart = (event) => {
+            if (pointerId !== null)
+                event.preventDefault();
+        };
+        element.addEventListener("pointerdown", onPointerDown);
+        element.addEventListener("pointermove", onPointerMove);
+        element.addEventListener("pointerup", onPointerUp);
+        element.addEventListener("pointercancel", onPointerCancel);
+        element.addEventListener("click", onClick, true);
+        element.addEventListener("dragstart", onDragOrSelectStart);
+        element.addEventListener("selectstart", onDragOrSelectStart);
+        return () => {
+            element.removeEventListener("pointerdown", onPointerDown);
+            element.removeEventListener("pointermove", onPointerMove);
+            element.removeEventListener("pointerup", onPointerUp);
+            element.removeEventListener("pointercancel", onPointerCancel);
+            element.removeEventListener("click", onClick, true);
+            element.removeEventListener("dragstart", onDragOrSelectStart);
+            element.removeEventListener("selectstart", onDragOrSelectStart);
+        };
+    }, [ref, enabled]);
+}

package/dist/nav-link.d.ts

@@ -7,17 +7,25 @@ import type { AsChildProps } from "./internal/as-child.js";
  * Apps pass `active` — the kit has no router.
  */
 declare const navLinkVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * Whether `href` is the current page for a nav link: the path itself, or a
+ * page under it (`/tasks` is active on `/tasks/42`, not on `/tasks-archive`).
+ * The kit has no router, so the app passes the pathname:
+ * `active={isNavActive(pathname, href)}`.
+ */
+declare function isNavActive(pathname: string, href: string): boolean;
 /**
  * Pill link for app-shell destinations (Calendar, Tasks, Settings). Pass
- * `active` from the route; the kit does not read the URL. `asChild` wraps a
- * router `Link` with these styles, the same Slot pattern as `BreadcrumbLink`.
+ * `active` from the route (`isNavActive` compares a pathname with the
+ * link's `href`); the kit does not read the URL. `asChild` wraps a router
+ * `Link` with these styles, the same Slot pattern as `BreadcrumbLink`.
  *
  * Not a tab: in-page view switches that belong in the URL use `TabsNav`
- * and `tabsTriggerVariants()`. Next apps can import the optional adapter
+ * and `TabsNavLink`. Next apps can import the optional adapter
  * from `atlas-react-kit/next/nav-link` instead of composing `asChild`.
  */
 declare function NavLink({ asChild, active, className, ...props }: React.ComponentProps<"a"> & AsChildProps & {
     /** This link is the current page: `aria-current="page"` and the selected chrome. */
     active: boolean;
 }): React.JSX.Element;
-export { NavLink, navLinkVariants };
+export { NavLink, isNavActive, navLinkVariants };

package/dist/nav-link.js

@@ -15,17 +15,27 @@ const navLinkVariants = cva([
     selectedState.active,
     "inline-flex items-center gap-1.5 rounded-none border border-transparent px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent data-[state=active]:font-medium",
 ]);
+/**
+ * Whether `href` is the current page for a nav link: the path itself, or a
+ * page under it (`/tasks` is active on `/tasks/42`, not on `/tasks-archive`).
+ * The kit has no router, so the app passes the pathname:
+ * `active={isNavActive(pathname, href)}`.
+ */
+function isNavActive(pathname, href) {
+    return pathname === href || pathname.startsWith(`${href}/`);
+}
 /**
  * Pill link for app-shell destinations (Calendar, Tasks, Settings). Pass
- * `active` from the route; the kit does not read the URL. `asChild` wraps a
- * router `Link` with these styles, the same Slot pattern as `BreadcrumbLink`.
+ * `active` from the route (`isNavActive` compares a pathname with the
+ * link's `href`); the kit does not read the URL. `asChild` wraps a router
+ * `Link` with these styles, the same Slot pattern as `BreadcrumbLink`.
  *
  * Not a tab: in-page view switches that belong in the URL use `TabsNav`
- * and `tabsTriggerVariants()`. Next apps can import the optional adapter
+ * and `TabsNavLink`. Next apps can import the optional adapter
  * from `atlas-react-kit/next/nav-link` instead of composing `asChild`.
  */
 function NavLink({ asChild, active, className, ...props }) {
     const Comp = asChild ? Slot.Root : "a";
     return (_jsx(Comp, { "data-slot": "nav-link", "data-state": active ? "active" : "inactive", "aria-current": active ? "page" : undefined, className: cn(navLinkVariants(), className), ...props }));
 }
-export { NavLink, navLinkVariants };
+export { NavLink, isNavActive, navLinkVariants };

package/dist/next/nav-link.d.ts

@@ -1,9 +1,12 @@
 import type * as React from "react";
 import Link from "next/link.js";
 /**
- * Next.js adapter for the shell `NavLink` pill. Same contract as
- * `TabsNavLink`: Next `Link` props plus a required `active` boolean. The
- * kit still does not read the router; the app passes `active`.
+ * Next.js adapter for the shell `NavLink` pill: the base `NavLink` with
+ * `asChild` around a Next `Link`, so it renders the same element. Same
+ * contract as `TabsNavLink`: Next `Link` props plus a required `active`
+ * boolean. The kit still does not read the router; the app passes `active`,
+ * usually `active={isNavActive(usePathname(), href)}` with `isNavActive`
+ * from `atlas-react-kit/nav-link`.
  */
 declare function NavLink({ active, className, ...props }: React.ComponentProps<typeof Link> & {
     active: boolean;

package/dist/next/nav-link.js

@@ -1,14 +1,16 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import Link from "next/link.js";
-import { navLinkVariants } from "../nav-link.js";
-import { cn } from "../utils.js";
+import { NavLink as BaseNavLink } from "../nav-link.js";
 /**
- * Next.js adapter for the shell `NavLink` pill. Same contract as
- * `TabsNavLink`: Next `Link` props plus a required `active` boolean. The
- * kit still does not read the router; the app passes `active`.
+ * Next.js adapter for the shell `NavLink` pill: the base `NavLink` with
+ * `asChild` around a Next `Link`, so it renders the same element. Same
+ * contract as `TabsNavLink`: Next `Link` props plus a required `active`
+ * boolean. The kit still does not read the router; the app passes `active`,
+ * usually `active={isNavActive(usePathname(), href)}` with `isNavActive`
+ * from `atlas-react-kit/nav-link`.
  */
 function NavLink({ active, className, ...props }) {
-    return (_jsx(Link, { "data-slot": "nav-link", "data-state": active ? "active" : "inactive", "aria-current": active ? "page" : undefined, className: cn(navLinkVariants(), className), ...props }));
+    return (_jsx(BaseNavLink, { asChild: true, active: active, className: className, children: _jsx(Link, { ...props }) }));
 }
 export { NavLink };

package/dist/next/tabs-nav-link.d.ts

@@ -1,5 +1,11 @@
 import type * as React from "react";
 import Link from "next/link.js";
+/**
+ * Next.js adapter for `TabsNavLink`: the base link with `asChild` around a
+ * Next `Link`, so it renders the same element. Next `Link` props plus a
+ * required `active` boolean (`isNavActive(usePathname(), href)` from
+ * `atlas-react-kit/nav-link` works here too).
+ */
 declare function TabsNavLink({ active, className, ...props }: React.ComponentProps<typeof Link> & {
     active: boolean;
 }): React.JSX.Element;

package/dist/next/tabs-nav-link.js

@@ -1,9 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import Link from "next/link.js";
-import { cn } from "../utils.js";
-import { tabsTriggerVariants } from "../internal/tabs-styles.js";
+import { TabsNavLink as BaseTabsNavLink } from "../tabs.js";
+/**
+ * Next.js adapter for `TabsNavLink`: the base link with `asChild` around a
+ * Next `Link`, so it renders the same element. Next `Link` props plus a
+ * required `active` boolean (`isNavActive(usePathname(), href)` from
+ * `atlas-react-kit/nav-link` works here too).
+ */
 function TabsNavLink({ active, className, ...props }) {
-    return (_jsx(Link, { "data-slot": "tabs-nav-link", "data-state": active ? "active" : "inactive", "aria-current": active ? "page" : undefined, className: cn(tabsTriggerVariants(), className), ...props }));
+    return (_jsx(BaseTabsNavLink, { asChild: true, active: active, className: className, children: _jsx(Link, { ...props }) }));
 }
 export { TabsNavLink };