atlas-react-kit 1.0.0 → 1.2.0

package/dist/internal/search.js

@@ -1,16 +1,19 @@
-import { foldSearchText } from "./listbox-navigation.js";
+/**
+ * Case-fold and strip combining marks so "nino" matches "Niño". Shared by
+ * Combobox and SearchPicker (which re-exports it).
+ */
+export function foldSearchText(value) {
+    return value.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+}
 /** Fold the query once; item labels are folded when their catalog changes. */
 export function normalizeSearchQuery(query) {
     return foldSearchText(query.trim());
 }
-export function matchesSearchLabel(label, needle) {
-    return label.includes(needle);
-}
 export function createSearchIndex(items, getLabel) {
     return items.map((item) => ({ item, label: foldSearchText(getLabel(item)) }));
 }
 export function filterSearchIndex(index, needle) {
     return index
-        .filter(({ label }) => matchesSearchLabel(label, needle))
+        .filter(({ label }) => label.includes(needle))
         .map(({ item }) => item);
 }

package/dist/internal/styles.d.ts

@@ -39,6 +39,11 @@ export declare const selectedState: {
 };
 /** The "No results" row of a listbox. */
 export declare const listboxEmpty = "px-3 py-4 text-center text-sm text-muted-foreground";
+/**
+ * The scrolling frame of a listbox (Combobox, SearchPicker): about ten rows
+ * tall, then scrolls. A consumer `listClassName` replaces the height.
+ */
+export declare const listboxScroll = "max-h-60 overflow-y-auto";
 /** Options in menus and listboxes. */
 export declare const optionState: {
     /** Highlight as focus moves: grey fill plus a 2px ring bar (the fill alone is 1.1:1). */
@@ -72,6 +77,28 @@ export declare const controlSize: {
     sm: string;
     lg: string;
 };
+/**
+ * Label text of a control (Button, Toggle, Badge): small, bold, wide-tracked
+ * uppercase on one line. Badge adds its own `text-[0.625rem]` after it;
+ * tailwind-merge then drops the `text-xs`.
+ */
+export declare const controlText = "text-xs font-semibold tracking-widest whitespace-nowrap uppercase";
+/**
+ * Icons inside a control or row: no pointer events, no shrinking, 14px
+ * unless the icon sets its own `size-*`. `sm` lowers that default to 12px
+ * for the xs controls; it goes after `default`, and tailwind-merge keeps
+ * the later size.
+ */
+export declare const inlineIcon: {
+    default: string;
+    sm: string;
+};
+/**
+ * Brand-colored text on hover and keyboard focus for quiet links and
+ * triggers (BreadcrumbLink, AccordionTrigger, InfoTip). DESIGN_RULES.md,
+ * "Tokens": brand text is `text-selected-foreground`, never `text-primary`.
+ */
+export declare const quietTextHover = "hover:text-selected-foreground focus-visible:text-selected-foreground";
 /**
  * Uppercase muted label used on tiles, legends, and thin section chrome.
  * Re-exported publicly from `atlas-react-kit/stat-tile`.

package/dist/internal/styles.js

@@ -39,6 +39,11 @@ export const selectedState = {
 };
 /** The "No results" row of a listbox. */
 export const listboxEmpty = "px-3 py-4 text-center text-sm text-muted-foreground";
+/**
+ * The scrolling frame of a listbox (Combobox, SearchPicker): about ten rows
+ * tall, then scrolls. A consumer `listClassName` replaces the height.
+ */
+export const listboxScroll = "max-h-60 overflow-y-auto";
 /** Options in menus and listboxes. */
 export const optionState = {
     /** Highlight as focus moves: grey fill plus a 2px ring bar (the fill alone is 1.1:1). */
@@ -72,6 +77,28 @@ export const controlSize = {
     sm: "h-9 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
     lg: "h-11 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
 };
+/**
+ * Label text of a control (Button, Toggle, Badge): small, bold, wide-tracked
+ * uppercase on one line. Badge adds its own `text-[0.625rem]` after it;
+ * tailwind-merge then drops the `text-xs`.
+ */
+export const controlText = "text-xs font-semibold tracking-widest whitespace-nowrap uppercase";
+/**
+ * Icons inside a control or row: no pointer events, no shrinking, 14px
+ * unless the icon sets its own `size-*`. `sm` lowers that default to 12px
+ * for the xs controls; it goes after `default`, and tailwind-merge keeps
+ * the later size.
+ */
+export const inlineIcon = {
+    default: "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+    sm: "[&_svg:not([class*='size-'])]:size-3",
+};
+/**
+ * Brand-colored text on hover and keyboard focus for quiet links and
+ * triggers (BreadcrumbLink, AccordionTrigger, InfoTip). DESIGN_RULES.md,
+ * "Tokens": brand text is `text-selected-foreground`, never `text-primary`.
+ */
+export const quietTextHover = "hover:text-selected-foreground focus-visible:text-selected-foreground";
 /**
  * Uppercase muted label used on tiles, legends, and thin section chrome.
  * Re-exported publicly from `atlas-react-kit/stat-tile`.

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

@@ -10,13 +10,14 @@ declare const tabsListVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Horizontal scroller around a tab row. `p-1` leaves room for the active
- * border and focus ring; the height is the `h-11` list plus that padding
- * (`h-13` = 44px + 8px) so the list fits the content box. Putting padding
- * on an overflow box without this height makes `scrollHeight` 4px taller
- * than `clientHeight` (48 vs 44) and a vertical scrollbar appears if
- * `overflow-y` is not hidden. Line variant adds `pb-2` for the underline
- * (`h-14` = 44px + 4px + 8px). A block, so it fills its parent without
- * `w-full`. `theme.css` hides the scrollbar and draws the edge fades.
+ * border and focus ring; the height is the `h-7` list plus that padding
+ * (`h-9` = 28px + 8px) so the list fits the content box and the outer
+ * row matches `Button` `size="sm"`. Putting padding on an overflow box
+ * without this height makes `scrollHeight` taller than `clientHeight`
+ * and a vertical scrollbar appears if `overflow-y` is not hidden. Line
+ * variant adds `pb-2` for the underline (`h-10` = 28px + 4px + 8px). A
+ * block, so it fills its parent without `w-full`. `theme.css` hides the
+ * scrollbar and draws the edge fades.
  */
 declare const tabsScrollerVariants: (props?: ({
     variant?: "default" | "line" | null | undefined;

package/dist/internal/tabs-styles.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { disabledState, focusRing, selectedState } from "./styles.js";
+import { disabledState, focusRing, inlineIcon, selectedState, } from "./styles.js";
 /**
  * Tab row. `TabsList` and `TabsNav` pass `orientation`, which picks plain
  * size classes so a consumer `className` (`h-9`) replaces them. Called
@@ -13,8 +13,8 @@ const tabsListVariants = cva("group/tabs-list inline-flex w-max min-w-full items
             line: "gap-1 bg-transparent",
         },
         orientation: {
-            auto: 'group-data-[orientation="horizontal"]/tabs:h-11 group-data-[orientation="vertical"]/tabs:h-fit group-data-[orientation="vertical"]/tabs:flex-col',
-            horizontal: "h-11",
+            auto: 'group-data-[orientation="horizontal"]/tabs:h-7 group-data-[orientation="vertical"]/tabs:h-fit group-data-[orientation="vertical"]/tabs:flex-col',
+            horizontal: "h-7",
             vertical: "h-fit flex-col",
         },
     },
@@ -25,13 +25,14 @@ const tabsListVariants = cva("group/tabs-list inline-flex w-max min-w-full items
 });
 /**
  * Horizontal scroller around a tab row. `p-1` leaves room for the active
- * border and focus ring; the height is the `h-11` list plus that padding
- * (`h-13` = 44px + 8px) so the list fits the content box. Putting padding
- * on an overflow box without this height makes `scrollHeight` 4px taller
- * than `clientHeight` (48 vs 44) and a vertical scrollbar appears if
- * `overflow-y` is not hidden. Line variant adds `pb-2` for the underline
- * (`h-14` = 44px + 4px + 8px). A block, so it fills its parent without
- * `w-full`. `theme.css` hides the scrollbar and draws the edge fades.
+ * border and focus ring; the height is the `h-7` list plus that padding
+ * (`h-9` = 28px + 8px) so the list fits the content box and the outer
+ * row matches `Button` `size="sm"`. Putting padding on an overflow box
+ * without this height makes `scrollHeight` taller than `clientHeight`
+ * and a vertical scrollbar appears if `overflow-y` is not hidden. Line
+ * variant adds `pb-2` for the underline (`h-10` = 28px + 4px + 8px). A
+ * block, so it fills its parent without `w-full`. `theme.css` hides the
+ * scrollbar and draws the edge fades.
  */
 const tabsScrollerVariants = cva("relative box-border min-w-0 max-w-full overflow-x-auto overflow-y-hidden overscroll-x-contain p-1", {
     variants: {
@@ -45,8 +46,8 @@ const tabsScrollerVariants = cva("relative box-border min-w-0 max-w-full overflo
         },
     },
     compoundVariants: [
-        { variant: "default", orientation: "horizontal", className: "h-13" },
-        { variant: "line", orientation: "horizontal", className: "h-14" },
+        { variant: "default", orientation: "horizontal", className: "h-9" },
+        { variant: "line", orientation: "horizontal", className: "h-10" },
     ],
     defaultVariants: {
         variant: "default",
@@ -59,7 +60,8 @@ const tabsTriggerVariants = cva([
     // flex-none + px-4: every trigger and TabsNav link keeps the same
     // horizontal padding. flex-1 used to grow short labels and make the
     // longest (e.g. Apple Reminders) look tighter. No last-child padding.
-    'relative inline-flex h-full min-w-max flex-none items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-[orientation="vertical"]/tabs:w-full group-data-[orientation="vertical"]/tabs:justify-start group-data-[orientation="vertical"]/tabs:px-4 group-data-[orientation="vertical"]/tabs:py-2 hover:text-foreground has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3.5',
+    'relative inline-flex h-full min-w-max flex-none items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-[orientation="vertical"]/tabs:w-full group-data-[orientation="vertical"]/tabs:justify-start group-data-[orientation="vertical"]/tabs:px-4 group-data-[orientation="vertical"]/tabs:py-2 hover:text-foreground has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground',
+    inlineIcon.default,
     'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state="active"]:border-transparent group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent',
     selectedState.active,
     'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation="horizontal"]/tabs:after:inset-x-0 group-data-[orientation="horizontal"]/tabs:after:bottom-[-5px] group-data-[orientation="horizontal"]/tabs:after:h-0.5 group-data-[orientation="vertical"]/tabs:after:inset-y-0 group-data-[orientation="vertical"]/tabs:after:-right-1 group-data-[orientation="vertical"]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state="active"]:after:opacity-100',

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/internal/use-media-query.d.ts

@@ -1,5 +1,10 @@
 /** Tailwind `md` breakpoint. Used for range calendars that stack on small screens. */
 export declare const MD_MEDIA_QUERY = "(min-width: 768px)";
+/**
+ * A pointer that can hover (a mouse or trackpad). Touch and coarse pointers
+ * must use click; a hover-open popover would trap them after the first tap.
+ */
+export declare const HOVER_MEDIA_QUERY = "(hover: hover) and (pointer: fine)";
 /**
  * Subscribe to a CSS media query with `useSyncExternalStore`. The server
  * render and hydration use `defaultMatches`, so the markup always agrees;

package/dist/internal/use-media-query.js

@@ -2,6 +2,11 @@
 import * as React from "react";
 /** Tailwind `md` breakpoint. Used for range calendars that stack on small screens. */
 export const MD_MEDIA_QUERY = "(min-width: 768px)";
+/**
+ * A pointer that can hover (a mouse or trackpad). Touch and coarse pointers
+ * must use click; a hover-open popover would trap them after the first tap.
+ */
+export const HOVER_MEDIA_QUERY = "(hover: hover) and (pointer: fine)";
 function hasMatchMedia() {
     return (typeof window !== "undefined" && typeof window.matchMedia === "function");
 }

package/dist/kanban.d.ts

@@ -59,7 +59,7 @@ export type KanbanBoardProps<T extends {
     deleteLabel?: string;
     /** Classes for the horizontal scroller that holds the columns. */
     scrollerClassName?: string;
-    /** Classes for every column, e.g. its width. */
+    /** Classes for every column, e.g. to pin a width instead of growing. */
     columnClassName?: string;
     /** Classes for every card, including the one under the pointer while dragging. */
     cardClassName?: string;

package/dist/kanban.js

@@ -13,7 +13,8 @@ import { cn } from "./utils.js";
 const COLUMN_DROP_PRIORITY = 1;
 /** Rail zones beat columns when both are under the pointer. */
 const ACTION_ZONE_PRIORITY = 10;
-const columnSize = "w-72 min-w-72 min-h-[min(70vh,32rem)]";
+/** Grow to fill the board; 18rem floor so a long row still scrolls. */
+const columnSize = "flex-1 basis-72 min-w-72 min-h-[min(70vh,32rem)]";
 /**
  * Drag-and-drop board built on dnd-kit. The consumer owns `items` and maps
  * each to a column; the board derives its layout from them, so an optimistic
@@ -123,7 +124,7 @@ function KanbanColumnView({ column, count, emptyLabel, loading, className, child
         collisionPriority: COLUMN_DROP_PRIORITY,
     });
     const empty = count === 0;
-    return (_jsxs("div", { ref: ref, "data-slot": "kanban-column", "data-drop-target": isDropTarget || undefined, className: cn("flex shrink-0 snap-start flex-col gap-3 p-3", "bg-muted/40 ring-1 ring-foreground/5", "data-drop-target:bg-muted/60 data-drop-target:ring-2 data-drop-target:ring-ring/60", columnSize, className), children: [_jsxs("header", { "data-slot": "kanban-column-header", className: "flex items-start justify-between gap-2", children: [_jsxs("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-widest uppercase", children: [column.color ? (_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-full", style: { backgroundColor: column.color } })) : null, _jsx("span", { className: "leading-tight", children: column.label })] }), _jsxs("span", { className: "flex shrink-0 flex-col items-end gap-0.5 text-muted-foreground tabular-nums", children: [_jsx("span", { className: "text-xs", children: count }), column.badge ? (_jsx("span", { className: "text-[10px] font-medium", children: column.badge })) : null] })] }), _jsx("div", { className: "flex min-h-32 flex-1 flex-col gap-2 overflow-y-auto pr-1", children: loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-20" }), _jsx(Skeleton, { className: "h-16" })] })) : (_jsxs(_Fragment, { children: [children, _jsx("p", { "data-slot": "kanban-column-empty", "aria-hidden": !empty, className: cn("border border-dashed px-3 py-6 text-center text-xs text-muted-foreground", !empty && "hidden"), children: emptyLabel })] })) })] }));
+    return (_jsxs("div", { ref: ref, "data-slot": "kanban-column", "data-drop-target": isDropTarget || undefined, className: cn("flex snap-start flex-col gap-3 p-3", "bg-muted/40 ring-1 ring-foreground/5", "data-drop-target:bg-muted/60 data-drop-target:ring-2 data-drop-target:ring-ring/60", columnSize, className), children: [_jsxs("header", { "data-slot": "kanban-column-header", className: "flex items-start justify-between gap-2", children: [_jsxs("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-widest uppercase", children: [column.color ? (_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-full", style: { backgroundColor: column.color } })) : null, _jsx("span", { className: "leading-tight", children: column.label })] }), _jsxs("span", { className: "flex shrink-0 flex-col items-end gap-0.5 text-muted-foreground tabular-nums", children: [_jsx("span", { className: "text-xs", children: count }), column.badge ? (_jsx("span", { className: "text-[10px] font-medium", children: column.badge })) : null] })] }), _jsx("div", { className: "flex min-h-32 flex-1 flex-col gap-2 overflow-y-auto pr-1", children: loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-20" }), _jsx(Skeleton, { className: "h-16" })] })) : (_jsxs(_Fragment, { children: [children, _jsx("p", { "data-slot": "kanban-column-empty", "aria-hidden": !empty, className: cn("border border-dashed px-3 py-6 text-center text-xs text-muted-foreground", !empty && "hidden"), children: emptyLabel })] })) })] }));
 }
 const cardChrome = cn("flex border border-border bg-card text-card-foreground");
 const handleChrome = cn("flex shrink-0 items-center self-stretch border-r border-border", "bg-muted/30 px-1.5 text-muted-foreground");
@@ -192,6 +193,6 @@ function OverflowFade({ side, visible, }) {
 }
 /** Board-shaped placeholder for a route `loading` file. */
 function KanbanSkeleton({ columnCount = 4, className, columnClassName, ...props }) {
-    return (_jsx("div", { "data-slot": "kanban-skeleton", className: cn("flex gap-4 overflow-hidden", className), ...props, children: Array.from({ length: columnCount }, (_, index) => (_jsx(Skeleton, { className: cn("shrink-0", columnSize, columnClassName) }, index))) }));
+    return (_jsx("div", { "data-slot": "kanban-skeleton", className: cn("flex gap-4 overflow-hidden", className), ...props, children: Array.from({ length: columnCount }, (_, index) => (_jsx(Skeleton, { className: cn(columnSize, columnClassName) }, index))) }));
 }
 export { KanbanBoard, KanbanSkeleton };

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 };

package/dist/picker-shell.d.ts

@@ -1,10 +1,11 @@
 import * as React from "react";
 import type { Locale } from "date-fns";
 import { type DateLike, type DateMatcher } from "./internal/date-like.js";
+import { LazyCalendar } from "./lazy-calendar.js";
 import { PopoverContent } from "./popover.js";
 /**
- * Not a public entry. The trigger, popover, and Clear footer that
- * `DatePickerButton` and `DateTimePickerButton` share.
+ * Not a public entry. The trigger, popover, calendar wiring, and Clear row
+ * that `DatePickerButton` and `DateTimePickerButton` share.
  */
 /**
  * Options for the picker's calendar. The picker owns the selection, focus,
@@ -80,13 +81,7 @@ export type PickerTriggerProps = {
     /** Day Picker options passed through to the calendar. */
     calendarProps?: PickerCalendarProps;
 };
-/**
- * `calendarProps` with `minDate` / `maxDate` applied: days outside them join
- * any `disabled` matchers, and they bound paging unless `startMonth` /
- * `endMonth` are set.
- */
-export declare function limitCalendarProps(calendarProps: PickerCalendarProps | undefined, minDate: DateLike, maxDate: DateLike): PickerCalendarProps | undefined;
-type PickerShellProps = Omit<PickerTriggerProps, "placeholder" | "defaultMonth" | "calendarProps" | "minDate" | "maxDate"> & {
+type PickerShellProps = Omit<PickerTriggerProps, "placeholder"> & {
     /** Muted trigger text while nothing is picked. */
     empty: boolean;
     /** Trigger text: the formatted value or the placeholder. */
@@ -97,17 +92,25 @@ type PickerShellProps = Omit<PickerTriggerProps, "placeholder" | "defaultMonth"
     open: boolean;
     /** Called when the popover opens or closes. */
     onOpenChange: (open: boolean) => void;
-    /** Called on a pointer down or focus outside the popover; can prevent the dismiss. */
-    onInteractOutside?: React.ComponentProps<typeof PopoverContent>["onInteractOutside"];
-    children: React.ReactNode;
+    /**
+     * The picker's own calendar props: its mode, selection and `onSelect`.
+     * The shell adds `calendarProps`, the date limits, `defaultMonth`, and
+     * focus on the selected day.
+     */
+    calendar: React.ComponentProps<typeof LazyCalendar>;
+    /**
+     * Shows a Clear row under the panel. Called when Clear is pressed; the
+     * popover then closes.
+     */
+    onClear?: () => void;
+    /** Disable Clear, e.g. while nothing is picked. */
+    clearDisabled?: boolean;
+    /** Extra panel rows between the calendar and Clear, e.g. time selects. */
+    children?: React.ReactNode;
 };
-/** Form-control trigger plus the viewport-clamped calendar popover. */
-export declare function PickerShell({ id, disabled, className, contentClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, side, empty, label, dialogLabel, open, onOpenChange, onInteractOutside, children, }: PickerShellProps): React.JSX.Element;
-/** Clear button row under the calendar. */
-export declare function PickerClearFooter({ disabled, onClear, }: {
-    /** Disable the Clear button, e.g. while nothing is picked. */
-    disabled: boolean;
-    /** Called when Clear is pressed. */
-    onClear: () => void;
-}): React.JSX.Element;
+/**
+ * Form-control trigger plus the viewport-clamped popover holding the
+ * calendar, any extra rows, and an optional Clear row.
+ */
+export declare function PickerShell({ id, disabled, className, contentClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, side, defaultMonth, minDate, maxDate, calendarProps, empty, label, dialogLabel, open, onOpenChange, calendar, onClear, clearDisabled, children, }: PickerShellProps): React.JSX.Element;
 export {};