atlas-react-kit 1.2.0 → 1.2.1

package/dist/internal/search.js

@@ -12,7 +12,13 @@ export function normalizeSearchQuery(query) {
 export function createSearchIndex(items, getLabel) {
     return items.map((item) => ({ item, label: foldSearchText(getLabel(item)) }));
 }
+/**
+ * The items whose folded label includes `needle` (a `normalizeSearchQuery`
+ * result), in order; every item when `needle` is empty.
+ */
 export function filterSearchIndex(index, needle) {
+    if (!needle)
+        return index.map(({ item }) => item);
     return index
         .filter(({ label }) => label.includes(needle))
         .map(({ item }) => item);

package/dist/internal/styles.d.ts

@@ -8,8 +8,12 @@
  */
 /** Keyboard focus: a solid 2px ring separated from filled controls (WCAG 1.4.11). */
 export declare const focusRing = "outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+/** The same ring on a wrapper with keyboard focus inside it. */
+export declare const focusRingWithin = "has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background";
 /** `aria-invalid`: destructive border and a soft glow; the error text carries the message. */
 export declare const invalidState = "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40";
+/** Muted trigger text while empty (`data-placeholder` or `data-empty`). */
+export declare const emptyValueText = "data-placeholder:text-muted-foreground data-[empty=true]:text-muted-foreground";
 /** Native `disabled`: dimmed, with no hover or click. */
 export declare const disabledState = "disabled:pointer-events-none disabled:opacity-50";
 /** Radix `data-disabled` (menu and list items, slider). */
@@ -37,6 +41,16 @@ export declare const selectedState: {
     /** Quiet buttons and toggles on hover. */
     hover: string;
 };
+/**
+ * Alert and Toast tones: a border, and `--status-tone` for the title and
+ * icon (`text-(--status-tone)`). `neutral` unsets it, so they inherit.
+ */
+export declare const statusTone: {
+    neutral: string;
+    success: string;
+    warning: string;
+    destructive: string;
+};
 /** The "No results" row of a listbox. */
 export declare const listboxEmpty = "px-3 py-4 text-center text-sm text-muted-foreground";
 /**
@@ -83,6 +97,8 @@ export declare const controlSize: {
  * tailwind-merge then drops the `text-xs`.
  */
 export declare const controlText = "text-xs font-semibold tracking-widest whitespace-nowrap uppercase";
+/** Field-label text (Label, FieldLegend, FieldTitle, PopoverTitle). */
+export declare const labelText = "text-xs font-semibold tracking-wide 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

package/dist/internal/styles.js

@@ -8,8 +8,12 @@
  */
 /** Keyboard focus: a solid 2px ring separated from filled controls (WCAG 1.4.11). */
 export const focusRing = "outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+/** The same ring on a wrapper with keyboard focus inside it. */
+export const focusRingWithin = "has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background";
 /** `aria-invalid`: destructive border and a soft glow; the error text carries the message. */
 export const invalidState = "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40";
+/** Muted trigger text while empty (`data-placeholder` or `data-empty`). */
+export const emptyValueText = "data-placeholder:text-muted-foreground data-[empty=true]:text-muted-foreground";
 /** Native `disabled`: dimmed, with no hover or click. */
 export const disabledState = "disabled:pointer-events-none disabled:opacity-50";
 /** Radix `data-disabled` (menu and list items, slider). */
@@ -37,6 +41,16 @@ export const selectedState = {
     /** Quiet buttons and toggles on hover. */
     hover: "hover:border-selected-foreground hover:bg-selected hover:text-selected-foreground",
 };
+/**
+ * Alert and Toast tones: a border, and `--status-tone` for the title and
+ * icon (`text-(--status-tone)`). `neutral` unsets it, so they inherit.
+ */
+export const statusTone = {
+    neutral: "[--status-tone:initial]",
+    success: "border-success/40 [--status-tone:var(--color-success)]",
+    warning: "border-warning/40 [--status-tone:var(--color-warning)]",
+    destructive: "border-destructive/40 [--status-tone:var(--color-destructive)]",
+};
 /** The "No results" row of a listbox. */
 export const listboxEmpty = "px-3 py-4 text-center text-sm text-muted-foreground";
 /**
@@ -83,6 +97,8 @@ export const controlSize = {
  * tailwind-merge then drops the `text-xs`.
  */
 export const controlText = "text-xs font-semibold tracking-widest whitespace-nowrap uppercase";
+/** Field-label text (Label, FieldLegend, FieldTitle, PopoverTitle). */
+export const labelText = "text-xs font-semibold tracking-wide 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

package/dist/kanban.js

@@ -7,6 +7,7 @@ import { CheckCircle2, ChevronLeft, ChevronRight, GripVertical, Trash2, } from "
 import { Button } from "./button.js";
 import { KANBAN_COMPLETE_ID, KANBAN_DELETE_ID, buildKanbanGroups, kanbanOverflowEdges, kanbanScrollBy, resolveKanbanDrop, } from "./internal/kanban-layout.js";
 import { configureCardSortablePlugins, configureKanbanPlugins, } from "./internal/kanban-plugins.js";
+import { focusRingWithin } from "./internal/styles.js";
 import { Skeleton } from "./skeleton.js";
 import { cn } from "./utils.js";
 /** Column droppables lose to cards, so a drop lands between cards. */
@@ -146,7 +147,7 @@ function KanbanCardViewImpl({ item, index, column, onCardClick, className, rende
         // The overlay moves; the source keeps its slot.
         "data-dragging:pointer-events-none data-dragging:invisible", 
         // One ring on the card for the grip and the body alike.
-        "has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background", onCardClick && "hover:border-foreground/15", className), children: [_jsx("button", { type: "button", ref: handleRef, "data-slot": "kanban-card-handle", "aria-label": "Drag to move", onClick: stopClick, className: cn(handleChrome, "cursor-grab outline-none hover:bg-muted/50 active:cursor-grabbing"), children: _jsx(GripVertical, { className: "size-4", "aria-hidden": true }) }), onCardClick ? (_jsx("button", { type: "button", "data-slot": "kanban-card-body", onClick: () => onCardClick(item), className: "min-w-0 flex-1 cursor-pointer p-3 text-left outline-none hover:bg-muted/20", children: children })) : (_jsx("div", { "data-slot": "kanban-card-body", className: "min-w-0 flex-1 p-3", children: children }))] }));
+        focusRingWithin, onCardClick && "hover:border-foreground/15", className), children: [_jsx("button", { type: "button", ref: handleRef, "data-slot": "kanban-card-handle", "aria-label": "Drag to move", onClick: stopClick, className: cn(handleChrome, "cursor-grab outline-none hover:bg-muted/50 active:cursor-grabbing"), children: _jsx(GripVertical, { className: "size-4", "aria-hidden": true }) }), onCardClick ? (_jsx("button", { type: "button", "data-slot": "kanban-card-body", onClick: () => onCardClick(item), className: "min-w-0 flex-1 cursor-pointer p-3 text-left outline-none hover:bg-muted/20", children: children })) : (_jsx("div", { "data-slot": "kanban-card-body", className: "min-w-0 flex-1 p-3", children: children }))] }));
 }
 /**
  * Memoized so a board update re-renders only the cards whose item, index or

package/dist/label.js

@@ -2,12 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Label as LabelPrimitive } from "radix-ui";
+import { labelText } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Form label. `required` adds a visible marker; style it with
  * `requiredClassName` or the `label-required` slot.
  */
 function Label({ className, required, requiredClassName, children, ...props }) {
-    return (_jsxs(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-xs font-semibold tracking-wide uppercase select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-normal peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio-group-item]:text-sm peer-data-[slot=radio-group-item]:font-normal peer-data-[slot=radio-group-item]:tracking-normal peer-data-[slot=radio-group-item]:normal-case peer-data-[slot=switch]:text-sm peer-data-[slot=switch]:font-normal peer-data-[slot=switch]:tracking-normal peer-data-[slot=switch]:normal-case", className), ...props, children: [children, required ? (_jsx("span", { "data-slot": "label-required", "aria-hidden": "true", className: cn("-ml-1.5 text-destructive", requiredClassName), children: "*" })) : null] }));
+    return (_jsxs(LabelPrimitive.Root, { "data-slot": "label", className: cn(labelText, "flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-normal peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio-group-item]:text-sm peer-data-[slot=radio-group-item]:font-normal peer-data-[slot=radio-group-item]:tracking-normal peer-data-[slot=radio-group-item]:normal-case peer-data-[slot=switch]:text-sm peer-data-[slot=switch]:font-normal peer-data-[slot=switch]:tracking-normal peer-data-[slot=switch]:normal-case", className), ...props, children: [children, required ? (_jsx("span", { "data-slot": "label-required", "aria-hidden": "true", className: cn("-ml-1.5 text-destructive", requiredClassName), children: "*" })) : null] }));
 }
 export { Label };

package/dist/lazy-calendar.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { calendarSize } from "./internal/calendar-size.js";
 import { Spinner } from "./spinner.js";
 import { cn } from "./utils.js";
 /**
@@ -16,11 +17,11 @@ export function preloadCalendar() {
 const LazyCalendarInner = React.lazy(() => loadCalendar().then((module) => ({ default: module.Calendar })));
 /**
  * While loading, a placeholder the size of a one-month calendar, measured in
- * the calendar's own `--cell-size` (7 columns plus `p-3`; about 9 cells
+ * the calendar's own `calendarSize` (7 columns plus padding; about 9 cells
  * tall), so the popover does not jump. It takes the calendar's `className`,
  * so a `--cell-size` override sizes both.
  */
-const fallbackClassName = "flex h-[calc(var(--cell-size)*9)] w-[calc(var(--cell-size)*7+--spacing(6))] items-center justify-center [--cell-size:--spacing(8)]";
+const fallbackClassName = cn("flex h-[calc(var(--cell-size)*9)] w-[calc(var(--cell-size)*7+var(--calendar-padding)*2)] items-center justify-center", calendarSize);
 export function LazyCalendar(props) {
     return (_jsx(React.Suspense, { fallback: _jsx("div", { className: cn(fallbackClassName, props.className), children: _jsx(Spinner, { "aria-label": "Loading calendar" }) }), children: _jsx(LazyCalendarInner, { ...props }) }));
 }

package/dist/nav-link.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
+import { activeLinkAttributes } from "./internal/active-link.js";
 import { focusRing, selectedState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
@@ -36,6 +37,6 @@ function isNavActive(pathname, href) {
  */
 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 }));
+    return (_jsx(Comp, { "data-slot": "nav-link", ...activeLinkAttributes(active), className: cn(navLinkVariants(), className), ...props }));
 }
 export { NavLink, isNavActive, navLinkVariants };

package/dist/popover.js

@@ -2,7 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
-import { overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
+import { OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET, overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
+import { labelText } from "./internal/styles.js";
 import { cn } from "./utils.js";
 function Popover({ ...props }) {
     return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
@@ -10,7 +11,7 @@ function Popover({ ...props }) {
 function PopoverTrigger({ ...props }) {
     return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
-function PopoverContent({ className, align = "center", sideOffset = 4, collisionPadding = 8, ...props }) {
+function PopoverContent({ className, align = "center", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, ...props }) {
     return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn(overlaySurface, overlaySideSlide, overlayFadeZoom, "z-50 flex max-w-(--radix-popover-content-available-width) origin-(--radix-popover-content-transform-origin) flex-col gap-4 p-4 text-sm outline-hidden", className), ...props }) }));
 }
 function PopoverAnchor({ ...props }) {
@@ -20,7 +21,7 @@ function PopoverHeader({ className, ...props }) {
     return (_jsx("div", { "data-slot": "popover-header", className: cn("flex flex-col gap-1 text-sm", className), ...props }));
 }
 function PopoverTitle({ className, ...props }) {
-    return (_jsx("h2", { "data-slot": "popover-title", className: cn("text-xs font-semibold uppercase", className), ...props }));
+    return (_jsx("h2", { "data-slot": "popover-title", className: cn(labelText, className), ...props }));
 }
 function PopoverDescription({ className, ...props }) {
     return (_jsx("p", { "data-slot": "popover-description", className: cn("mt-0.5 text-sm leading-relaxed text-muted-foreground", className), ...props }));

package/dist/search-picker.js

@@ -3,10 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
-import { handleListboxKey, listboxOptionId, } from "./internal/listbox-navigation.js";
-import { ListboxEmptyStatus, PickerOption } from "./internal/listbox-option.js";
+import { handleListboxKey } from "./internal/listbox-navigation.js";
+import { Listbox, ListboxEmptyStatus, listboxInputAria, PickerOption, } from "./internal/listbox-option.js";
 import { createSearchIndex, filterSearchIndex, foldSearchText, normalizeSearchQuery, } from "./internal/search.js";
-import { listboxScroll } from "./internal/styles.js";
 import { cn } from "./utils.js";
 export { foldSearchText };
 /**
@@ -25,7 +24,7 @@ const listFrame = "border border-input bg-background";
  * the list is not in a popover. Keyboard: arrows, Home/End, PageUp/PageDown,
  * Enter, Escape.
  */
-function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter, value, onSelect, label, placeholder = "Search", emptyText = "No results", listLabel, disabled, className, listClassName, ...props }) {
+function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter, value, onSelect, label, placeholder = "Search", emptyText, listLabel, disabled, className, listClassName, ...props }) {
     const [query, setQuery] = React.useState("");
     const listId = React.useId();
     const inputId = React.useId();
@@ -34,11 +33,8 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
         : null, [filter, getLabel, items]);
     const foldedQuery = filter === defaultSearchFilter ? normalizeSearchQuery(query) : "";
     const filtered = React.useMemo(() => {
-        if (normalizedItems) {
-            if (!foldedQuery)
-                return items;
+        if (normalizedItems)
             return filterSearchIndex(normalizedItems, foldedQuery);
-        }
         return items.filter((item) => filter(item, query, getLabel));
     }, [items, filter, foldedQuery, getLabel, normalizedItems, query]);
     const selectedIndex = React.useMemo(() => {
@@ -85,6 +81,6 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
         }
         event.currentTarget.blur();
     };
-    return (_jsxs("div", { "data-slot": "search-picker", className: cn("flex flex-col gap-1.5", className), ...props, children: [_jsx(Label, { htmlFor: inputId, children: label }), _jsx(Input, { id: inputId, role: "combobox", "aria-expanded": true, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": active ? listboxOptionId(listId, highlight) : undefined, value: query, disabled: disabled, placeholder: placeholder, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown }), _jsx("ul", { id: listId, role: "listbox", "aria-label": listLabel ?? label, className: empty ? "sr-only" : cn(listboxScroll, listFrame, listClassName), children: rows.map(({ item, value: itemValue }, index) => (_jsx(PickerOption, { "data-slot": "search-picker-option", listId: listId, index: index, active: index === highlight, selected: itemValue === value, disabled: disabled, item: item, getLabel: getLabel, onHighlight: setHighlight, onSelect: selectItem }, itemValue))) }), _jsx(ListboxEmptyStatus, { "data-slot": "search-picker-empty", empty: empty, className: listFrame, children: emptyText })] }));
+    return (_jsxs("div", { "data-slot": "search-picker", className: cn("flex flex-col gap-1.5", className), ...props, children: [_jsx(Label, { htmlFor: inputId, children: label }), _jsx(Input, { id: inputId, role: "combobox", "aria-expanded": true, "aria-controls": listId, ...listboxInputAria(listId, active ? highlight : undefined), value: query, disabled: disabled, placeholder: placeholder, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown }), _jsx(Listbox, { id: listId, empty: empty, "aria-label": listLabel ?? label, className: cn(listFrame, listClassName), children: rows.map(({ item, value: itemValue }, index) => (_jsx(PickerOption, { "data-slot": "search-picker-option", listId: listId, index: index, active: index === highlight, selected: itemValue === value, disabled: disabled, item: item, getLabel: getLabel, onHighlight: setHighlight, onSelect: selectItem }, itemValue))) }), _jsx(ListboxEmptyStatus, { "data-slot": "search-picker-empty", empty: empty, className: listFrame, children: emptyText })] }));
 }
 export { SearchPicker };

package/dist/select.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Select as SelectPrimitive } from "radix-ui";
-import { dataDisabledState, disabledState, fieldSurface, focusRing, inlineIcon, invalidState, optionState, } from "./internal/styles.js";
-import { menuLabel, optionRow, overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
+import { dataDisabledState, disabledState, emptyValueText, fieldSurface, focusRing, inlineIcon, invalidState, optionState, } from "./internal/styles.js";
+import { menuLabel, optionRow, OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET, overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
 import { cn } from "./utils.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
 /**
@@ -22,9 +22,9 @@ function SelectValue({ ...props }) {
     return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({ className, size = "default", children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn(fieldSurface, focusRing, invalidState, disabledState, inlineIcon.default, triggerHeight[size], "flex items-center justify-between gap-1.5 whitespace-nowrap data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { "data-slot": "select-icon", asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })] }));
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn(fieldSurface, focusRing, invalidState, disabledState, emptyValueText, emptyValueText, inlineIcon.default, triggerHeight[size], "flex items-center justify-between gap-1.5 whitespace-nowrap *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { "data-slot": "select-icon", asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })] }));
 }
-function SelectContent({ className, children, position = "popper", align = "center", sideOffset = 4, collisionPadding = 8, ...props }) {
+function SelectContent({ className, children, position = "popper", align = "center", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = OVERLAY_COLLISION_PADDING, ...props }) {
     return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", "data-align-trigger": position === "item-aligned", className: cn(overlaySurface, overlaySideSlide, overlayFadeZoom, "relative z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none", position === "popper" &&
                 "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { "data-slot": "select-viewport", "data-position": position, className: "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)", children: children }), _jsx(SelectScrollDownButton, {})] }) }));
 }

package/dist/skip-link.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { focusRing } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * First focusable link on the page: hidden until a keyboard user tabs to
  * it, then it jumps past the navigation to `href` (the main landmark's id).
  */
 function SkipLink({ href = "#main-content", className, children = "Skip to content", ...props }) {
-    return (_jsx("a", { "data-slot": "skip-link", href: href, className: cn("sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-background focus:px-3 focus:py-2 focus:text-sm focus:ring-2 focus:ring-ring", className), ...props, children: children }));
+    return (_jsx("a", { "data-slot": "skip-link", href: href, className: cn("sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-background focus:px-3 focus:py-2 focus:text-sm", focusRing, className), ...props, children: children }));
 }
 export { SkipLink };

package/dist/tabs.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import {} from "class-variance-authority";
 import { Slot, Tabs as TabsPrimitive } from "radix-ui";
+import { activeLinkAttributes, activeLinkSelector, } from "./internal/active-link.js";
 import { focusRing } from "./internal/styles.js";
 import { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants, } from "./internal/tabs-styles.js";
 import { useDragScroll } from "./internal/use-drag-scroll.js";
@@ -37,7 +38,7 @@ function TabsScroller({ variant = "default", orientation = "horizontal", classNa
         const scroller = ref.current;
         if (!scroller)
             return;
-        const active = scroller.querySelector('[aria-current="page"], [data-state="active"]');
+        const active = scroller.querySelector(activeLinkSelector);
         if (!active || active === revealed.current)
             return;
         revealed.current = active;
@@ -74,7 +75,7 @@ function TabsContent({ className, ...props }) {
  */
 function TabsNavLink({ asChild, active, className, ...props }) {
     const Comp = asChild ? Slot.Root : "a";
-    return (_jsx(Comp, { "data-slot": "tabs-nav-link", "data-state": active ? "active" : "inactive", "aria-current": active ? "page" : undefined, className: cn(tabsTriggerVariants(), className), ...props }));
+    return (_jsx(Comp, { "data-slot": "tabs-nav-link", ...activeLinkAttributes(active), className: cn(tabsTriggerVariants(), className), ...props }));
 }
 /**
  * Tab-styled links for a view switcher that changes the URL. Use this, not

package/dist/toast.js

@@ -5,6 +5,7 @@ import { CircleAlertIcon, CircleCheckIcon, InfoIcon, LoaderCircleIcon, XIcon, }
 import { useTheme } from "next-themes";
 import { Toaster as Sonner, toast as sonnerToast, } from "sonner";
 import { buttonVariants } from "./button.js";
+import { statusTone } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Copies only the kit's options, so plain JavaScript callers cannot hand the
@@ -42,7 +43,7 @@ const toast = Object.assign(show(sonnerToast), {
  *
  * Icon policy: a plain `toast()` has no icon. `success`, `info`, `warning`,
  * `error`, and `loading` each show a status icon. Tone colors the icon, title,
- * and border (same approach as Alert), not the body text.
+ * and border (`statusTone`, shared with Alert), not the body text.
  *
  * Close button: a circular badge centred on the top-right corner (`-top-2
  * -right-2`, half outside the border). Ghost / icon-xs still supplies the
@@ -70,22 +71,22 @@ const classNames = {
     // falls back to the title's width, so a one-word toast stays compact.
     // 1.625rem = 16px icon + 10px gap-x-2.5.
     content: "flex min-w-0 flex-1 basis-full flex-col gap-1 [[data-icon]+&]:basis-[calc(100%-1.625rem)]",
-    title: "font-medium leading-5",
+    title: "font-medium leading-5 text-(--status-tone)",
     description: "leading-5 text-muted-foreground",
     icon: "flex size-4 shrink-0 items-center justify-center [&_svg]:size-4",
     actionButton: cn(buttonVariants({ size: "xs" }), "shrink-0"),
     cancelButton: cn(buttonVariants({ variant: "outline", size: "xs" }), "shrink-0"),
     closeButton: cn(buttonVariants({ variant: "ghost", size: "icon-xs" }), "!absolute !-top-2 !-right-2 !left-auto !z-10 !size-6 !rounded-full !border !border-border !bg-popover !p-0 !text-muted-foreground !shadow-xs !translate-x-0 !translate-y-0 hover:!border-border hover:!bg-popover hover:!text-foreground focus-visible:!text-foreground active:!translate-y-0 [&_svg]:!size-3"),
-    success: "border-success/40 [&_[data-title]]:text-success",
-    info: "[&_[data-title]]:text-foreground",
-    warning: "border-warning/40 [&_[data-title]]:text-warning",
-    error: "border-destructive/40 [&_[data-title]]:text-destructive",
+    success: statusTone.success,
+    info: statusTone.neutral,
+    warning: statusTone.warning,
+    error: statusTone.destructive,
 };
 const icons = {
-    success: _jsx(CircleCheckIcon, { "aria-hidden": true, className: "text-success" }),
-    info: _jsx(InfoIcon, { "aria-hidden": true, className: "text-foreground" }),
-    warning: _jsx(CircleAlertIcon, { "aria-hidden": true, className: "text-warning" }),
-    error: _jsx(CircleAlertIcon, { "aria-hidden": true, className: "text-destructive" }),
+    success: _jsx(CircleCheckIcon, { "aria-hidden": true, className: "text-(--status-tone)" }),
+    info: _jsx(InfoIcon, { "aria-hidden": true, className: "text-(--status-tone)" }),
+    warning: _jsx(CircleAlertIcon, { "aria-hidden": true, className: "text-(--status-tone)" }),
+    error: _jsx(CircleAlertIcon, { "aria-hidden": true, className: "text-(--status-tone)" }),
     loading: (_jsx(LoaderCircleIcon, { "aria-hidden": true, className: "animate-spin text-muted-foreground" })),
     close: _jsx(XIcon, { "aria-hidden": true, className: "size-3" }),
 };

package/dist/tooltip.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { overlaySideSlide } from "./internal/overlay-styles.js";
+import { OVERLAY_SIDE_OFFSET, overlaySideSlide, } from "./internal/overlay-styles.js";
 import { cn } from "./utils.js";
 /** True inside a TooltipProvider, so `Tooltip` does not add its own. */
 const HasTooltipProvider = React.createContext(false);
@@ -28,7 +28,7 @@ function Tooltip({ ...props }) {
 function TooltipTrigger({ ...props }) {
     return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
-function TooltipContent({ className, arrowClassName, sideOffset = 4, children, ...props }) {
+function TooltipContent({ className, arrowClassName, sideOffset = OVERLAY_SIDE_OFFSET, children, ...props }) {
     return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn(overlaySideSlide, 
             // Radix tooltips open as "delayed-open" or "instant-open", which
             // the shared data-open fade does not match.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",

package/skills/atlas-react-kit/SKILL.md

@@ -28,23 +28,21 @@ than guessing.
 
 ## 2. Check the project setup once
 
-Components render unstyled unless the app's global stylesheet imports the theme
-and tells Tailwind to scan the kit's compiled files:
+Components render unstyled unless the app's global stylesheet imports the
+theme and tells Tailwind to scan the kit's compiled files. Compare the app
+with the setup in the package's README (the stylesheet lines and dark mode):
 
-```css
-@import "tailwindcss";
-@import "atlas-react-kit/theme.css";
-@source "../node_modules/atlas-react-kit/dist"; /* relative to this CSS file */
+```sh
+cat "$KIT/README.md"
 ```
 
-Dark mode needs `ThemeProvider` from `atlas-react-kit/theme-provider` near the
-root (or a `dark` class on an ancestor). Toasts need one `<Toaster />` from
-`atlas-react-kit/toast`; show them with `toast()` from the same module, using
-only the options it declares. Never import a toast library such as `sonner`
-directly: the kit owns the toast API, and a second copy never reaches its
-toaster. Some entry points need optional peers; install the extras from the
-"Optional peer dependencies" table in `COMPONENTS.md` when you import them.
-Fix missing setup rather than working around unstyled components.
+Toasts need one `<Toaster />` from `atlas-react-kit/toast`; show them with
+`toast()` from the same module, using only the options it declares. Never
+import a toast library such as `sonner` directly: the kit owns the toast API,
+and a second copy never reaches its toaster. Some entry points need optional
+peers; install the extras from the "Optional peer dependencies" table in
+`COMPONENTS.md` when you import them. Fix missing setup rather than working
+around unstyled components.
 
 ## 3. Pick the kit component for the job
 
@@ -54,48 +52,54 @@ Import each component from its subpath, e.g.
 
 | Need                                                       | Use                                                                                                                     |
 | ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| Short fixed list (a handful of options)                    | `Select` family from `select`                                                                                           |
-| Long or searchable list (timezones, currencies)            | `Combobox` from `combobox` with `{ value, label }[]` options; set `creatable` to invent a value the catalog lacks       |
+| Short fixed list (a handful of options)                    | `Select` from `select`                                                                                                  |
+| Long or searchable list (timezones, currencies)            | `Combobox` from `combobox`                                                                                              |
 | Always-visible searchable list (places)                    | `SearchPicker` from `search-picker`                                                                                     |
-| One date, or a from/to range                               | `DatePickerButton` from `date-picker` (`mode="range"` for ranges)                                                       |
+| One date, or a from/to range                               | `DatePickerButton` from `date-picker`                                                                                   |
 | Date and time (not `datetime-local`)                       | `DateTimePickerButton` from `date-time-picker`                                                                          |
 | Labelled field with error text                             | `FormTextField`, `FormSelectField`, `FormDatePickerField`, `FormDateTimePickerField`, `FormMarkdownField` from `form/*` |
 | Checkbox, checkbox group, toggle group, combobox in a form | `FormCheckboxField`, `FormCheckboxGroupField`, `FormToggleGroupField`, `FormComboboxField` from `form/*`                |
 | Custom control the kit has no form field for               | `FormControlField` from `form/control-field`                                                                            |
 | Form-level error (save failed)                             | `FormFeedbackField` from `form/feedback-field`                                                                          |
-| Content panels on one page                                 | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` from `tabs`                                                            |
-| View switch that changes the URL                           | `TabsNav` with `TabsNavLink` from `tabs` (`asChild` for a router link); Next: `next/tabs-nav-link`                      |
-| App shell nav (Calendar, Tasks, Settings)                  | `NavLink` from `nav-link` (`asChild` for a router link); Next: `next/nav-link`; `active={isNavActive(pathname, href)}`  |
-| Focus the first invalid field when a submit fails          | `focusFirstInvalid(formId)` from `form/focus-first-invalid`; give fields `id={field.name}`                              |
+| Focus the first invalid field when a submit fails          | `focusFirstInvalid` from `form/focus-first-invalid`                                                                     |
+| Content panels on one page                                 | `Tabs` from `tabs`                                                                                                      |
+| View switch that changes the URL                           | `TabsNav` and `TabsNavLink` from `tabs`; in Next, `next/tabs-nav-link`                                                  |
+| App shell nav (Calendar, Tasks, Settings)                  | `NavLink` from `nav-link`; in Next, `next/nav-link`                                                                     |
 | Skip-to-content link                                       | `SkipLink` from `skip-link`                                                                                             |
 | Page title row with actions                                | `PageHeader` from `page-header`                                                                                         |
-| Previous / today / next period                             | `PeriodStepper` from `period-stepper`; `next/period-stepper` for URL periods                                            |
-| Cards in columns that drag                                 | `KanbanBoard` from `kanban`; `KanbanSkeleton` while loading                                                             |
-| SVG chart axes, grid, tooltip, legend                      | `chart` helpers (`chartFrame`, `ChartYAxisGrid`, `ChartTooltip`, `ChartLegend`)                                         |
-| Status chip (paid, pending, failed)                        | `Badge variant="soft"` with `tone="success"`, `"warning"`, `"destructive"`, or `"neutral"`                              |
-| Data table                                                 | `Table` family from `table`; `SortableTableHead`; `TableBodySkeleton` while loading                                     |
+| Previous / today / next period                             | `PeriodStepper` from `period-stepper`; for URL periods in Next, `next/period-stepper`                                   |
+| Cards in columns that drag                                 | `KanbanBoard` from `kanban`                                                                                             |
+| SVG chart axes, grid, tooltip, legend                      | `chartFrame` and the other helpers from `chart`                                                                         |
+| Status chip (paid, pending, failed)                        | `Badge` from `badge`                                                                                                    |
+| Data table                                                 | `Table` from `table`                                                                                                    |
+| Sortable column header                                     | `SortableTableHead` from `sortable-table-head`                                                                          |
+| Table body while loading                                   | `TableBodySkeleton` from `table-body-skeleton`                                                                          |
 | Nothing to show yet                                        | `EmptyPanel` from `empty-panel`                                                                                         |
-| Grouped content                                            | `Card` family from `card`; `<Card flush>` for an edge-to-edge table or list                                             |
-| Modal                                                      | `Dialog` family from `dialog`                                                                                           |
-| Label for an icon button, or a short hint                  | `Tooltip` from `tooltip`; keep `aria-label` on icon buttons                                                             |
-| Longer help from a glyph                                   | `InfoTip` / `InlineTip` from `info-tip` (not `Tooltip`)                                                                 |
+| Grouped content                                            | `Card` from `card`                                                                                                      |
+| Modal                                                      | `Dialog` from `dialog`                                                                                                  |
+| Label for an icon button, or a short hint                  | `Tooltip` from `tooltip`                                                                                                |
+| Longer help from a glyph                                   | `InfoTip` from `info-tip`                                                                                               |
 | Color scale key                                            | `ColorLegend` from `color-legend`                                                                                       |
-| GitHub-flavoured Markdown                                  | `Markdown` from `markdown`; write/preview with `FormMarkdownField`                                                      |
-| Summary figure in a strip                                  | `StatTile` from `stat-tile` (`statTileGrid`, `sectionLabel`)                                                            |
-| Value against a scale, optional ticks                      | `Meter` from `meter` (not `Progress`)                                                                                   |
+| GitHub-flavoured Markdown                                  | `Markdown` from `markdown`                                                                                              |
+| Summary figure in a strip                                  | `StatTile` from `stat-tile`                                                                                             |
+| Value against a scale, optional ticks                      | `Meter` from `meter`                                                                                                    |
 | Number on a continuous scale                               | `Slider` from `slider`                                                                                                  |
-| Row actions or an overflow menu of commands                | `DropdownMenu` family from `dropdown-menu`                                                                              |
-| Setting that applies immediately                           | `Switch` from `switch`; `Checkbox` for choices submitted with a form                                                    |
-| One choice from a few visible options                      | `RadioGroup` and `RadioGroupItem` from `radio-group`                                                                    |
-| Inline message about a page or section                     | `Alert` from `alert` (`success`, `warning`, `destructive` variants)                                                     |
-| Person or workspace image                                  | `Avatar`, `AvatarImage`, `AvatarFallback` from `avatar`                                                                 |
-| Sections that expand in place                              | `Accordion` family from `accordion`                                                                                     |
-| Pages of a long list                                       | `Pagination` family from `pagination`                                                                                   |
-| Where the page sits in a hierarchy                         | `Breadcrumb` family from `breadcrumb`                                                                                   |
-| Work in progress                                           | `Progress` from `progress` when the percent is known, else `Spinner` from `spinner`                                     |
+| Row actions or an overflow menu of commands                | `DropdownMenu` from `dropdown-menu`                                                                                     |
+| Setting that applies immediately                           | `Switch` from `switch`                                                                                                  |
+| On/off choice submitted with a form                        | `Checkbox` from `checkbox`                                                                                              |
+| One choice from a few visible options                      | `RadioGroup` from `radio-group`                                                                                         |
+| Inline message about a page or section                     | `Alert` from `alert`                                                                                                    |
+| Person or workspace image                                  | `Avatar` from `avatar`                                                                                                  |
+| Sections that expand in place                              | `Accordion` from `accordion`                                                                                            |
+| Pages of a long list                                       | `Pagination` from `pagination`                                                                                          |
+| Where the page sits in a hierarchy                         | `Breadcrumb` from `breadcrumb`                                                                                          |
+| Job with a known percentage                                | `Progress` from `progress`                                                                                              |
+| Wait of unknown length                                     | `Spinner` from `spinner`                                                                                                |
 | Crash recovery around a section                            | `ErrorBoundary` from `error-boundary`                                                                                   |
 | Conditional classes                                        | `cn` from `utils`                                                                                                       |
 
+The parts, props, and options of each are in its `COMPONENTS.md` row.
+
 If nothing fits, build the piece in the app from kit primitives and semantic
 tokens. Do not copy kit source into the app; a missing shared component belongs
 in the atlas-design-system repository.