atlas-react-kit 1.1.0 → 1.2.1

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.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { foldSearchText } from "./internal/listbox-navigation.js";
+import { foldSearchText } from "./internal/search.js";
 export { foldSearchText };
 /**
  * Default SearchPicker filter: the folded label includes the folded query.

package/dist/search-picker.js

@@ -3,9 +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 { foldSearchText, handleListboxKey, listboxOptionId, } from "./internal/listbox-navigation.js";
-import { ListboxEmptyStatus, PickerOption } from "./internal/listbox-option.js";
-import { createSearchIndex, filterSearchIndex, matchesSearchLabel, normalizeSearchQuery, } from "./internal/search.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 { cn } from "./utils.js";
 export { foldSearchText };
 /**
@@ -15,7 +15,7 @@ export function defaultSearchFilter(item, query, getLabel) {
     const needle = normalizeSearchQuery(query);
     if (!needle)
         return true;
-    return matchesSearchLabel(foldSearchText(getLabel(item)), needle);
+    return foldSearchText(getLabel(item)).includes(needle);
 }
 /** Frame shared by the listbox and the empty state that replaces it. */
 const listFrame = "border border-input bg-background";
@@ -24,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();
@@ -33,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(() => {
@@ -84,8 +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("max-h-60 overflow-y-auto", 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, invalidState, optionState, } from "./internal/styles.js";
-import { menuLabel, optionIcon, 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";
 /**
@@ -11,7 +11,7 @@ import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
  * replaces them (a `data-[size=*]:` variant would outrank it).
  */
 const triggerHeight = { default: "h-10", sm: "h-9" };
-const scrollButtonClassName = "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5";
+const scrollButtonClassName = cn("z-10 flex cursor-default items-center justify-center bg-popover py-1", inlineIcon.default);
 function Select({ ...props }) {
     return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
@@ -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, optionIcon, 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, {})] }) }));
 }
@@ -32,7 +32,7 @@ function SelectLabel({ className, ...props }) {
     return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn(menuLabel, className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
-    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn(optionRow, optionState.focus, optionState.checked, dataDisabledState, optionIcon, "pr-8 not-data-[variant=destructive]:focus:**:text-accent-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { "data-slot": "select-item-indicator", children: _jsx(CheckIcon, { className: "pointer-events-none" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn(optionRow, optionState.focus, optionState.checked, dataDisabledState, inlineIcon.default, "pr-8 not-data-[variant=destructive]:focus:**:text-accent-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { "data-slot": "select-item-indicator", children: _jsx(CheckIcon, { className: "pointer-events-none" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
 }
 function SelectSeparator({ className, ...props }) {
     return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1.5 my-1.5 h-px bg-border", className), ...props }));

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.d.ts

@@ -5,14 +5,14 @@ import type { AsChildProps } from "./internal/as-child.js";
 import { tabsListVariants, tabsTriggerVariants } from "./internal/tabs-styles.js";
 /** Props `TabsList` and `TabsNav` share for the scroller around their row. */
 type TabsScrollerClassNameProps = {
-    /** Classes for the scroller around the tab row (`h-13` with `p-1` by default). */
+    /** Classes for the scroller around the tab row (`h-9` with `p-1` by default). */
     scrollerClassName?: string;
 };
 declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
 /**
- * The tab row inside its scroller. `className` styles the list (its `h-11`
+ * The tab row inside its scroller. `className` styles the list (its `h-7`
  * height, fill, gap); `scrollerClassName` styles the scroller around it
- * (`h-13` with `p-1` for the active border and focus ring).
+ * (`h-9` with `p-1` for the active border and focus ring).
  */
 declare function TabsList({ className, scrollerClassName, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & Omit<VariantProps<typeof tabsListVariants>, "orientation"> & TabsScrollerClassNameProps): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;

package/dist/tabs.js

@@ -3,13 +3,14 @@ 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";
 import { useHorizontalOverflow } from "./internal/use-horizontal-overflow.js";
 import { cn } from "./utils.js";
 /**
- * The root's orientation, so the list can pick plain size classes (`h-11`)
+ * The root's orientation, so the list can pick plain size classes (`h-7`)
  * that a consumer `className` replaces, instead of `group-data-*` variants
  * that would beat it.
  */
@@ -21,7 +22,7 @@ function Tabs({ className, orientation = "horizontal", ...props }) {
  * Horizontal scroller around a tab row. `overflow-x: auto` alone would
  * compute `overflow-y` to `auto` as well (CSS overflow pairing), so the
  * active tab's border and focus ring grow a vertical scrollbar. Pad for
- * those strokes *inside* the box (`h-13` = `h-11` list + `p-1`), clip the
+ * those strokes *inside* the box (`h-9` = `h-7` list + `p-1`), clip the
  * y axis as a backstop, and fade the edges while the row overflows —
  * same cue as `Table`. While it overflows, a mouse can also drag the row
  * sideways (`useDragScroll`); touch, wheel and keyboard scroll as before.
@@ -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;
@@ -50,9 +51,9 @@ function TabsScroller({ variant = "default", orientation = "horizontal", classNa
     return (_jsx("div", { ref: ref, "data-slot": "tabs-scroller", "data-variant": variant, tabIndex: overflowing ? 0 : undefined, className: cn(focusRing, tabsScrollerVariants({ variant, orientation }), className), children: children }));
 }
 /**
- * The tab row inside its scroller. `className` styles the list (its `h-11`
+ * The tab row inside its scroller. `className` styles the list (its `h-7`
  * height, fill, gap); `scrollerClassName` styles the scroller around it
- * (`h-13` with `p-1` for the active border and focus ring).
+ * (`h-9` with `p-1` for the active border and focus ring).
  */
 function TabsList({ className, scrollerClassName, variant = "default", ...props }) {
     const orientation = React.useContext(TabsOrientationContext);
@@ -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/toggle.d.ts

@@ -5,6 +5,8 @@ import { Toggle as TogglePrimitive } from "radix-ui";
  * Selected chrome shared by Toggle and ToggleGroupItem (see
  * `selectedState.toggle`): the wash, selected text, and a selected border
  * for `data-state=on`, `aria-pressed`, and `aria-checked`.
+ *
+ * @deprecated `toggleVariants()` already includes this chrome. Removed in 2.0.
  */
 declare const selectedToggleChrome: string;
 declare const toggleVariants: (props?: ({

package/dist/toggle.js

@@ -3,21 +3,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Toggle as TogglePrimitive } from "radix-ui";
-import { controlSize, disabledState, focusRing, invalidState, selectedState, } from "./internal/styles.js";
+import { controlSize, controlText, disabledState, focusRing, inlineIcon, invalidState, selectedState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Selected chrome shared by Toggle and ToggleGroupItem (see
  * `selectedState.toggle`): the wash, selected text, and a selected border
  * for `data-state=on`, `aria-pressed`, and `aria-checked`.
+ *
+ * @deprecated `toggleVariants()` already includes this chrome. Removed in 2.0.
  */
 const selectedToggleChrome = selectedState.toggle;
 const toggleVariants = cva([
     focusRing,
     selectedState.hover,
-    selectedToggleChrome,
+    selectedState.toggle,
     invalidState,
     disabledState,
-    "group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors focus-visible:text-selected-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+    "group/toggle inline-flex items-center justify-center gap-1.5 rounded-none",
+    controlText,
+    "transition-colors focus-visible:text-selected-foreground",
+    inlineIcon.default,
 ], {
     variants: {
         variant: {

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.1.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.