atlas-react-kit 1.2.2 → 1.2.4

package/DESIGN_RULES.md

@@ -117,11 +117,11 @@ still read normal words.
 ## Shape and composition
 
 Primitives have square corners. Reserve `rounded-full` for dots, avatars,
-other circles, and the toast close badge. Card and dialog titles already use
-uppercase, tracked `font-heading` styling. Toasts are overlay popovers with
-the same square corners and Alert's left padding. The close control is a
-circular badge centred on the top-right corner (half outside the border),
-not a control in the text row. A plain `toast()` has no icon — status icons
+and other circles. Card and dialog titles already use
+uppercase, tracked `font-heading` styling. Toasts use the same square corners
+and Alert's left padding, with a square close button inside the top-right
+corner. The toaster floats over the page at its `position`, anchored to the
+viewport; mount one near the app root. A plain `toast()` has no icon — status icons
 belong to `success`, `info`, `warning`, `error`, and `loading`. Tone colors
 the icon, title, and border, not the body.
 
@@ -146,8 +146,8 @@ toasts keep their width.
 
 Parents do not force sizes on their children. A vertical `Field` stretches
 its controls through the flex column, so a control's own width class (such
-as `w-32`) wins; `Field`, `Alert`, and `Pagination` set no width of their
-own. `FieldGroup` keeps `w-full` because its inline-size container has no
+as `w-32`) wins; `Field` and `Alert` set no width of their
+own. `FieldGroup` and `Pagination` keep `w-full` because an inline-size container has no
 intrinsic width. Size classes that `className` should be able to replace are
 plain classes picked from props (`Avatar` `size`, `Separator` orientation,
 `SelectTrigger` `size`, tab orientation), never `data-*` variants, which sort

package/dist/chart.js

@@ -144,7 +144,7 @@ export function ChartYAxisGrid({ frame, yMax, tickCount = 4, format = compactNum
     const ticks = niceTicks(yMax, tickCount);
     const top = ticks[ticks.length - 1] ?? 1;
     const y = (value) => frame.bottom - (value / top) * frame.plotHeight;
-    return (_jsx("g", { "data-slot": "chart-y-axis", children: ticks.map((tick) => (_jsxs("g", { children: [_jsx("line", { x1: frame.left, y1: y(tick), x2: frame.right, y2: y(tick), strokeWidth: 1, className: "stroke-border" }), _jsx("text", { x: frame.left - 6, y: y(tick) + 3, textAnchor: "end", className: "fill-muted-foreground text-[10px] tabular-nums", children: format(tick) })] }, tick))) }));
+    return (_jsx("g", { "data-slot": "chart-y-axis", children: ticks.map((tick) => (_jsxs("g", { children: [_jsx("line", { x1: frame.left, y1: y(tick), x2: frame.right, y2: y(tick), strokeWidth: 1, className: "stroke-input" }), _jsx("text", { x: frame.left - 6, y: y(tick) + 3, textAnchor: "end", className: "fill-muted-foreground text-xs tabular-nums", children: format(tick) })] }, tick))) }));
 }
 /**
  * Readout for the hovered or focused point, placed in percent of the chart

package/dist/field.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { cva } from "class-variance-authority";
-import { labelText } from "./internal/styles.js";
+import { errorText, labelText } from "./internal/styles.js";
 import { cn } from "./utils.js";
 import { Label } from "./label.js";
 import { Separator } from "./separator.js";
@@ -77,6 +77,6 @@ function FieldError({ className, children, errors, ...props }) {
     if (!content) {
         return null;
     }
-    return (_jsx("div", { role: "alert", "data-slot": "field-error", className: cn("text-sm font-normal text-destructive", className), ...props, children: content }));
+    return (_jsx("div", { role: "alert", "data-slot": "field-error", className: cn(errorText, className), ...props, children: content }));
 }
 export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };

package/dist/form/feedback-field.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { errorText } from "../internal/styles.js";
 import { cn } from "../utils.js";
 /** Form-level submit or mutation error (not tied to a single field). */
 export function FormFeedbackField({ message, className, }) {
     if (!message)
         return null;
-    return (_jsx("p", { "data-slot": "form-feedback", className: cn("text-sm text-destructive", className), role: "alert", children: message }));
+    return (_jsx("p", { "data-slot": "form-feedback", className: cn(errorText, className), role: "alert", children: message }));
 }

package/dist/form/field-error.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { errorText } from "../internal/styles.js";
 import { cn } from "../utils.js";
 /** First TanStack Form error message for a field, if any. */
 export function getFieldErrorMessage(message) {
@@ -10,5 +11,5 @@ export function FieldError({ id, message, text, className, }) {
     const resolved = text ?? getFieldErrorMessage(message);
     if (!resolved)
         return null;
-    return (_jsx("p", { id: id, "data-slot": "form-field-error", className: cn("text-xs text-destructive", className), role: "alert", children: resolved }));
+    return (_jsx("p", { id: id, "data-slot": "form-field-error", className: cn(errorText, className), role: "alert", children: resolved }));
 }

package/dist/internal/calendar-size.d.ts

@@ -2,4 +2,4 @@
  * Calendar cell size and padding, shared with LazyCalendar's placeholder
  * (here, not in calendar.tsx, so the placeholder skips Day Picker).
  */
-export declare const calendarSize = "[--cell-size:--spacing(8)] [--calendar-padding:--spacing(3)]";
+export declare const calendarSize = "[--cell-size:--spacing(8)] [--calendar-padding:--spacing(2)]";

package/dist/internal/calendar-size.js

@@ -2,4 +2,4 @@
  * Calendar cell size and padding, shared with LazyCalendar's placeholder
  * (here, not in calendar.tsx, so the placeholder skips Day Picker).
  */
-export const calendarSize = "[--cell-size:--spacing(8)] [--calendar-padding:--spacing(3)]";
+export const calendarSize = "[--cell-size:--spacing(8)] [--calendar-padding:--spacing(2)]";

package/dist/internal/styles.d.ts

@@ -10,8 +10,8 @@
 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";
+/** `aria-invalid`: a destructive border; keyboard focus keeps the shared solid ring. */
+export declare const invalidState = "aria-invalid:border-destructive";
 /** 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. */
@@ -60,7 +60,7 @@ export declare const listboxEmpty = "px-3 py-4 text-center text-sm text-muted-fo
 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). */
+    /** Highlight as focus moves: grey fill plus a 2px ring bar, unlike checked. */
     focus: string;
     /** The same highlight for lists that track the active option in state. */
     active: string;
@@ -102,6 +102,8 @@ export declare const controlText = "text-xs font-semibold tracking-widest whites
  * DialogDescription, AlertDescription).
  */
 export declare const descriptionText = "text-sm leading-relaxed text-muted-foreground";
+/** Field and form-level error text share one size, weight, and color. */
+export declare const errorText = "text-sm font-normal text-destructive";
 /** Field-label text (Label, FieldLegend, FieldTitle, PopoverTitle). */
 export declare const labelText = "text-xs font-semibold tracking-wide uppercase";
 /**

package/dist/internal/styles.js

@@ -10,8 +10,8 @@
 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";
+/** `aria-invalid`: a destructive border; keyboard focus keeps the shared solid ring. */
+export const invalidState = "aria-invalid:border-destructive";
 /** 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. */
@@ -60,7 +60,7 @@ export const listboxEmpty = "px-3 py-4 text-center text-sm text-muted-foreground
 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). */
+    /** Highlight as focus moves: grey fill plus a 2px ring bar, unlike checked. */
     focus: "focus:bg-accent focus:text-accent-foreground focus:shadow-[inset_2px_0_0_var(--color-ring)]",
     /** The same highlight for lists that track the active option in state. */
     active: "bg-accent text-accent-foreground shadow-[inset_2px_0_0_var(--color-ring)]",
@@ -102,6 +102,8 @@ export const controlText = "text-xs font-semibold tracking-widest whitespace-now
  * DialogDescription, AlertDescription).
  */
 export const descriptionText = "text-sm leading-relaxed text-muted-foreground";
+/** Field and form-level error text share one size, weight, and color. */
+export const errorText = "text-sm font-normal text-destructive";
 /** Field-label text (Label, FieldLegend, FieldTitle, PopoverTitle). */
 export const labelText = "text-xs font-semibold tracking-wide uppercase";
 /**

package/dist/internal/tabs-styles.js

@@ -6,7 +6,7 @@ import { disabledState, focusRing, inlineIcon, selectedState, } from "./styles.j
  * without it (`auto`), the row reads the orientation from the `group/tabs`
  * root instead, as it always has for apps building their own list.
  */
-const tabsListVariants = cva("group/tabs-list inline-flex w-max min-w-full items-stretch justify-start p-0 text-muted-foreground", {
+const tabsListVariants = cva("group/tabs-list inline-flex w-max min-w-full items-stretch justify-start p-0 after:w-1 after:shrink-0 after:content-[''] text-muted-foreground", {
     variants: {
         variant: {
             default: "bg-muted",

package/dist/internal/use-horizontal-overflow.d.ts

@@ -5,3 +5,5 @@ import * as React from "react";
  * join the tab order only while it overflows (WCAG 2.1.1).
  */
 export declare function useHorizontalOverflow(ref: React.RefObject<HTMLElement | null>): boolean;
+/** Scrolls a keyboard-focused `element` and its ring into `scroller`'s view. */
+export declare function revealInline(scroller: HTMLElement, element: Element): void;

package/dist/internal/use-horizontal-overflow.js

@@ -21,3 +21,17 @@ export function useHorizontalOverflow(ref) {
     }, [ref]);
     return overflowing;
 }
+/** Scrolls a keyboard-focused `element` and its ring into `scroller`'s view. */
+export function revealInline(scroller, element) {
+    const rect = element.getBoundingClientRect();
+    const focused = scroller.ownerDocument.activeElement;
+    if (!rect.width || !focused?.matches(":focus-visible"))
+        return;
+    const box = scroller.getBoundingClientRect();
+    const before = rect.left - 8 - box.left;
+    const after = rect.right + 8 - box.right;
+    if (before < 0)
+        scroller.scrollLeft += before;
+    else if (after > 0)
+        scroller.scrollLeft += Math.min(after, before);
+}

package/dist/kanban.js

@@ -8,6 +8,7 @@ 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 { revealInline } from "./internal/use-horizontal-overflow.js";
 import { Skeleton } from "./skeleton.js";
 import { cn } from "./utils.js";
 /** Column droppables lose to cards, so a drop lands between cards. */
@@ -77,7 +78,11 @@ function KanbanBoard({ columns, items, getColumnId, onMove, onComplete, onDelete
     }, [cardClassName, itemById, renderCard]);
     // `min-w-0` lets a flex or grid parent shrink the board so the scroller,
     // not the page, overflows.
-    return (_jsx("div", { "data-slot": "kanban-board", className: cn("min-w-0", className), ...props, children: _jsxs(DragDropProvider, { plugins: configureKanbanPlugins, onDragOver: handleDragOver, onDragEnd: handleDragEnd, children: [_jsxs("div", { className: "relative min-w-0", children: [_jsx("div", { ref: scrollerRef, "data-slot": "kanban-scroller", "data-loading": dimmed || undefined, "data-overflow-start": overflow.start || undefined, "data-overflow-end": overflow.end || undefined, onScroll: overflow.measure, className: cn("flex min-w-0 gap-4 overflow-x-auto pb-2", 
+    return (_jsx("div", { "data-slot": "kanban-board", className: cn("min-w-0", className), ...props, children: _jsxs(DragDropProvider, { plugins: configureKanbanPlugins, onDragOver: handleDragOver, onDragEnd: handleDragEnd, children: [_jsxs("div", { className: "relative min-w-0", children: [_jsx("div", { ref: scrollerRef, "data-slot": "kanban-scroller", "data-loading": dimmed || undefined, "data-overflow-start": overflow.start || undefined, "data-overflow-end": overflow.end || undefined, onScroll: overflow.measure, onFocus: (event) => {
+                                const card = event.target.closest('[data-slot="kanban-card"]');
+                                if (card)
+                                    revealInline(event.currentTarget, card);
+                            }, className: cn("flex min-w-0 gap-4 overflow-x-auto pb-2", 
                             // AutoScroller scrolls in small steps near the edge; mandatory
                             // snap would pull each one back, so it is off mid-drag.
                             "snap-x snap-mandatory scroll-px-2 has-data-dragging:snap-none", "data-loading:opacity-60", scrollerClassName), children: columns.map((column) => {
@@ -125,7 +130,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 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 flex-wrap items-start justify-between gap-x-2 gap-y-0.5", children: [_jsxs("span", { className: "flex max-w-full min-w-0 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: "truncate leading-tight", title: column.label, children: column.label })] }), _jsxs("span", { className: "ml-auto flex max-w-full min-w-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: "max-w-full truncate text-[10px] font-medium", children: column.badge })) : null] })] }), _jsx("div", { className: "-m-1 mr-0 flex min-h-32 flex-1 flex-col gap-2 overflow-y-auto p-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("div", { "data-slot": "kanban-column-header", className: "flex flex-wrap items-start justify-between gap-x-2 gap-y-0.5", children: [_jsxs("span", { className: "flex max-w-full min-w-0 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: "truncate leading-tight", title: column.label, children: column.label })] }), _jsxs("span", { className: "ml-auto flex max-w-full min-w-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: "max-w-full truncate text-[10px] font-medium", children: column.badge })) : null] })] }), _jsx("div", { className: "-m-1 mr-0 flex min-h-32 flex-1 flex-col gap-2 overflow-y-auto p-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");

package/dist/meter.js

@@ -15,6 +15,6 @@ function Meter({ value, min = 0, max, fillClassName = "bg-primary", markers, "ar
             return 0;
         return clamp(((amount - min) / span) * 100, 0, 100);
     };
-    return (_jsxs("div", { ...props, role: "meter", "data-slot": "meter", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": clamp(current, min, max), "aria-label": ariaLabel, className: cn("relative h-1.5 w-full overflow-hidden bg-muted", className), children: [_jsx("div", { "data-slot": "meter-fill", className: cn("h-full", fillClassName), style: { width: `${toPercent(current)}%` } }), markers?.map((marker) => (_jsx("div", { "aria-hidden": true, "data-slot": "meter-marker", className: cn("absolute inset-y-0 w-px bg-foreground/40", marker.className), style: { left: `${toPercent(marker.position)}%` } }, marker.position)))] }));
+    return (_jsxs("div", { ...props, role: "meter", "data-slot": "meter", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": clamp(current, min, max), "aria-label": ariaLabel, className: cn("relative h-1.5 w-full overflow-hidden bg-input", className), children: [_jsx("div", { "data-slot": "meter-fill", className: cn("h-full", fillClassName), style: { width: `${toPercent(current)}%` } }), markers?.map((marker) => (_jsx("div", { "aria-hidden": true, "data-slot": "meter-marker", className: cn("absolute inset-y-0 w-px bg-foreground/40", marker.className), style: { left: `${toPercent(marker.position)}%` } }, marker.position)))] }));
 }
 export { Meter };

package/dist/pagination.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 /**
  * Page links for long lists and tables. Links are plain anchors so the page
  * lives in the URL; pass `onClick` with `href` for client-side routing.
- * The nav is a plain flex row: place it with `className` (`justify-center`,
+ * The nav fills its container: place its links with `className` (`justify-center`,
  * `justify-end`, `mx-auto`) to suit the layout.
  */
 declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;

package/dist/pagination.js

@@ -7,14 +7,14 @@ import { cn } from "./utils.js";
 /**
  * Page links for long lists and tables. Links are plain anchors so the page
  * lives in the URL; pass `onClick` with `href` for client-side routing.
- * The nav is a plain flex row: place it with `className` (`justify-center`,
+ * The nav fills its container: place its links with `className` (`justify-center`,
  * `justify-end`, `mx-auto`) to suit the layout.
  */
 function Pagination({ className, ...props }) {
-    return (_jsx("nav", { "aria-label": "Pagination", "data-slot": "pagination", className: cn("flex", className), ...props }));
+    return (_jsx("nav", { "aria-label": "Pagination", "data-slot": "pagination", className: cn("@container/pagination flex w-full min-w-0", className), ...props }));
 }
 function PaginationContent({ className, ...props }) {
-    return (_jsx("ul", { "data-slot": "pagination-content", className: cn("flex flex-row items-center gap-1", className), ...props }));
+    return (_jsx("ul", { "data-slot": "pagination-content", className: cn("flex flex-row flex-wrap items-center gap-1", className), ...props }));
 }
 function PaginationItem({ ...props }) {
     return _jsx("li", { "data-slot": "pagination-item", ...props });

package/dist/progress.js

@@ -14,6 +14,6 @@ function Progress({ className, indicatorClassName, value, max = 100, ...props })
     const scale = Number.isFinite(max) && max > 0 ? max : 100;
     const current = value != null && Number.isFinite(value) ? clamp(value, 0, scale) : null;
     const filled = current == null ? 0 : (current / scale) * 100;
-    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", value: current, max: scale, className: cn("relative h-2 w-full overflow-hidden rounded-none bg-primary/15", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: cn("h-full w-full flex-1 bg-primary transition-transform", indicatorClassName), style: { transform: `translateX(-${100 - filled}%)` } }) }));
+    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", value: current, max: scale, className: cn("relative h-2 w-full overflow-hidden rounded-none bg-input", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: cn("h-full w-full flex-1 bg-primary transition-transform", indicatorClassName), style: { transform: `translateX(-${100 - filled}%)` } }) }));
 }
 export { Progress };

package/dist/separator.js

@@ -8,6 +8,6 @@ import { cn } from "./utils.js";
  * `orientation`, so `className="w-12"` or `"w-0.5"` replaces them.
  */
 function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
-    return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "vertical" ? "w-px self-stretch" : "h-px w-full", className), ...props }));
+    return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-input", orientation === "vertical" ? "w-px self-stretch" : "h-px w-full", className), ...props }));
 }
 export { Separator };

package/dist/skeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "./utils.js";
 function Skeleton({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "skeleton", className: cn("animate-pulse bg-muted", className), ...props }));
+    return (_jsx("div", { "data-slot": "skeleton", className: cn("animate-pulse bg-input", className), ...props }));
 }
 export { Skeleton };

package/dist/slider.js

@@ -18,6 +18,6 @@ function Slider({ value, onValueChange, onValueCommit, min = 0, max = 100, step
             const amount = next[0];
             if (amount !== undefined)
                 onValueCommit?.(amount);
-        }, className: cn(dataDisabledState, "relative flex w-full touch-none items-center select-none", className), children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative h-1.5 w-full grow overflow-hidden rounded-none bg-muted", children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: "absolute h-full bg-primary" }) }), _jsx(SliderPrimitive.Thumb, { id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-slot": "slider-thumb", className: cn(focusRing, hitArea44, "relative block size-4 shrink-0 rounded-none border border-primary bg-background shadow-xs") })] }));
+        }, className: cn(dataDisabledState, "relative flex w-full touch-none items-center select-none", className), children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative h-1.5 w-full grow overflow-hidden rounded-none bg-input", children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: "absolute h-full bg-primary" }) }), _jsx(SliderPrimitive.Thumb, { id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-slot": "slider-thumb", className: cn(focusRing, hitArea44, "relative block size-4 shrink-0 rounded-none border border-primary bg-background shadow-xs") })] }));
 }
 export { Slider };

package/dist/tabs.js

@@ -7,7 +7,7 @@ import { activeLinkAttributes, activeLinkSelector, } from "./internal/active-lin
 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 { revealInline, 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-7`)
@@ -48,7 +48,10 @@ function TabsScroller({ variant = "default", orientation = "horizontal", classNa
             behavior: "auto",
         });
     });
-    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 }));
+    return (_jsx("div", { ref: ref, onFocus: (event) => {
+            if (event.target !== event.currentTarget)
+                revealInline(event.currentTarget, event.target);
+        }, "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-7`

package/dist/toast.js

@@ -5,7 +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 { focusRing, statusTone } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Copies only the kit's options, so plain JavaScript callers cannot hand the
@@ -45,27 +45,18 @@ const toast = Object.assign(show(sonnerToast), {
  * `error`, and `loading` each show a status icon. Tone colors the icon, title,
  * 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
- * shared focus ring, but Sonner's unlayered `[data-button]` default
- * (`background: var(--normal-text)`) and the dark `[data-close-button]` rule
- * (not gated on `data-styled`) would paint a foreground square. Important
- * popover fill, border, and muted text beat those fills. The 24px hit area
- * is the badge itself; the X is 12px. `overflow-visible` on the toast and
- * toaster keeps stacked badges from being clipped.
+ * Close button: a 24px square inside the top-right corner. Important kit
+ * utilities beat Sonner's unlayered close-button positioning and colors.
  *
- * Stacking: while the stack is collapsed, every part of the toasts behind
- * the front one is `invisible`. Their badges would otherwise peek out above
- * the front toast, closer together than the 24px target spacing, and their
- * buttons would stay in the tab order unseen. Hovering or focusing the stack
- * expands it (see `Toaster`), which shows them again.
+ * Stacking: the toaster floats at `position`; collapsed back toasts are
+ * `invisible`. Hovering or focusing expands it (see `Toaster`).
  *
- * Padding is asymmetric: `pl-4` matches Alert; `pr-6` clears the badge
- * (about 16px of it sits inside the border). Icon-to-text is `gap-x-2.5`
+ * Padding is asymmetric: `pl-4` matches Alert; `pr-10` clears the close
+ * button. Icon-to-text is `gap-x-2.5`
  * so the status icon and copy read as one unit.
  */
 const classNames = {
-    toast: "relative flex w-max max-w-[min(356px,calc(100vw-2rem))] flex-wrap items-center justify-end gap-x-2.5 gap-y-2 overflow-visible rounded-none border border-border bg-popover py-3 pl-4 pr-6 text-sm text-popover-foreground shadow-md data-[expanded=false]:data-[front=false]:*:invisible",
+    toast: cn(focusRing, "relative flex w-max max-w-[min(356px,calc(100vw-2rem))] flex-wrap items-center justify-end gap-x-2.5 gap-y-2 overflow-visible rounded-none border border-border bg-popover py-3 pl-4 pr-10 text-sm text-popover-foreground shadow-md focus-visible:!shadow-[var(--tw-ring-offset-shadow),var(--tw-ring-shadow)] data-[visible=false]:invisible data-[expanded=false]:data-[front=false]:*:invisible"),
     // Fills the row beside the icon, so action buttons wrap to their own row
     // (aligned right by the toast's justify-end). Without an icon the basis
     // falls back to the title's width, so a one-word toast stays compact.
@@ -76,7 +67,7 @@ const classNames = {
     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"),
+    closeButton: cn(buttonVariants({ variant: "ghost", size: "icon-xs" }), "!absolute !top-2 !right-2 !left-auto !z-10 !size-6 !rounded-none !border !border-border !bg-popover !p-0 !text-muted-foreground !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: statusTone.success,
     info: statusTone.neutral,
     warning: statusTone.warning,
@@ -104,6 +95,6 @@ const Toaster = ({ position, closeButton = true, expand, visibleToasts, duration
             setFocusWithin(false);
         }
     };
-    return (_jsx("div", { "data-slot": "toaster", className: "contents", onFocus: () => setFocusWithin(true), onBlur: onBlur, children: _jsx(Sonner, { theme: theme, className: "toaster group overflow-visible", position: position, closeButton: closeButton, expand: expand || focusWithin, visibleToasts: visibleToasts, duration: duration, icons: icons, toastOptions: { unstyled: true, classNames } }) }));
+    return (_jsx("div", { "data-slot": "toaster", className: "contents", onFocus: () => setFocusWithin(true), onBlur: onBlur, children: _jsx(Sonner, { theme: theme, className: "toaster group overflow-visible", style: { fontFamily: "var(--font-sans)" }, position: position, closeButton: closeButton, expand: expand || focusWithin, visibleToasts: visibleToasts, duration: duration, icons: icons, toastOptions: { unstyled: true, classNames } }) }));
 };
 export { Toaster, toast };

package/package.json

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

package/theme.css

@@ -227,6 +227,305 @@
  * without `!`. Size and flush still set the variable on `[data-slot=card]`.
  */
 @layer components {
+  /*
+   * Pagination that no longer fits its container drops pages in two steps,
+   * sized for 36px page links, 38px icon-only Previous / Next and a 4px gap
+   * (40px per item; `n` items fit in n x 40px). The first and last <li> are
+   * Previous and Next.
+   * 1. A list with an ellipsis keeps Previous, the first and last pages, the
+   *    current page, the ellipses and Next (plus a lone page between the
+   *    first or last page and the current one), so every gap is still marked.
+   * 2. Narrower still, or for a list without an ellipsis, only Previous, the
+   *    current page and Next stay. The list also wraps rather than spill.
+   */
+  @container pagination (width < 10rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(4)):not(:has(> li:nth-child(5)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(4)):not(:has(> li:nth-child(5)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 7.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(4)):not(:has(> li:nth-child(5)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 12.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(5)):not(:has(> li:nth-child(6)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(5)):not(:has(> li:nth-child(6)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 10rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(5)):not(:has(> li:nth-child(6)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 15rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(6)):not(:has(> li:nth-child(7)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(6)):not(:has(> li:nth-child(7)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 12.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(6)):not(:has(> li:nth-child(7)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 17.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(7)):not(:has(> li:nth-child(8)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(7)):not(:has(> li:nth-child(8)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 15rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(7)):not(:has(> li:nth-child(8)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 20rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(8)):not(:has(> li:nth-child(9)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(8)):not(:has(> li:nth-child(9)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 17.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(8)):not(:has(> li:nth-child(9)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 22.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(9)):not(:has(> li:nth-child(10)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(9)):not(:has(> li:nth-child(10)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 17.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(9)):not(:has(> li:nth-child(10)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 25rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(10)):not(:has(> li:nth-child(11)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(10)):not(:has(> li:nth-child(11)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 17.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(10)):not(:has(> li:nth-child(11)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 27.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(11)):not(:has(> li:nth-child(12)))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(11)):not(:has(> li:nth-child(12)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 17.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(11)):not(:has(> li:nth-child(12)))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 30rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(12))
+      > li:not(
+        :first-child,
+        :last-child,
+        :nth-child(2),
+        :nth-last-child(2),
+        :has([aria-current="page"]),
+        :has([data-slot="pagination-ellipsis"]),
+        :nth-child(3):not(:has([data-slot="pagination-ellipsis"]) + li):has(
+            + li [aria-current="page"]
+          ),
+        :has([aria-current="page"])
+          + :nth-last-child(3):not(:has(+ li [data-slot="pagination-ellipsis"]))
+      ),
+    [data-slot="pagination-content"]:has([aria-current="page"]):not(
+        :has([data-slot="pagination-ellipsis"])
+      ):has(> li:nth-child(12))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
+  @container pagination (width < 17.5rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"]):has(
+        [data-slot="pagination-ellipsis"]
+      ):has(> li:nth-child(12))
+      > li:not(:first-child, :last-child, :has([aria-current="page"])) {
+      display: none;
+    }
+  }
   [data-slot="card"] {
     padding-block: var(--card-p);
   }