atlas-react-kit 1.2.2 → 1.2.3

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. Mount the toaster in its own notification area; it occupies space
+in the page so notifications do not cover content. 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/badge.js

@@ -21,7 +21,7 @@ const badgeVariants = cva([
             ghost: "text-muted-foreground hover:text-foreground",
             link: "text-foreground underline-offset-4 hover:underline",
             /** Tinted chip; pick its color with `tone`. */
-            soft: "px-2 py-0.5 text-xs font-medium tracking-normal normal-case",
+            soft: "px-2 py-0.5",
         },
         /** Only `soft` reads this. */
         tone: {

package/dist/button.js

@@ -21,7 +21,7 @@ const buttonVariants = cva([
     disabledState,
     "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding",
     controlText,
-    "transition-all select-none active:not-aria-[haspopup]:translate-y-px",
+    "transition-all select-none active:not-aria-[haspopup]:translate-y-px disabled:opacity-100 disabled:saturate-0",
     inlineIcon.default,
 ], {
     variants: {

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("border-t border-destructive pt-3", 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: the selected wash plus a 2px inset ring bar. */
     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,10 +60,10 @@ 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). */
-    focus: "focus:bg-accent focus:text-accent-foreground focus:shadow-[inset_2px_0_0_var(--color-ring)]",
+    /** Highlight as focus moves: the selected wash plus a 2px inset ring bar. */
+    focus: "focus:bg-selected focus:text-selected-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)]",
+    active: "bg-selected text-selected-foreground shadow-[inset_2px_0_0_var(--color-ring)]",
     /** The chosen value (`data-state="checked"`); a check icon marks it too. */
     checked: "data-[state=checked]:bg-selected data-[state=checked]:text-selected-foreground",
     /** The chosen value in lists that track selection in state. */
@@ -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/kanban.js

@@ -77,7 +77,7 @@ 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 pb-12", 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", 
                             // 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 +125,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");
@@ -185,7 +185,7 @@ function ActionZone({ id, label, regionLabel, icon: Icon, tone, visible, }) {
 }
 function ScrollButton({ side, onClick, }) {
     const Icon = side === "start" ? ChevronLeft : ChevronRight;
-    return (_jsx(Button, { type: "button", variant: "outline", size: "icon-sm", "data-slot": "kanban-scroll-button", "aria-label": side === "start" ? "Show previous columns" : "Show next columns", onClick: onClick, className: cn("absolute top-1/2 z-20 -translate-y-1/2", side === "start" ? "left-1" : "right-1"), children: _jsx(Icon, {}) }));
+    return (_jsx(Button, { type: "button", variant: "outline", size: "icon-sm", "data-slot": "kanban-scroll-button", "aria-label": side === "start" ? "Show previous columns" : "Show next columns", onClick: onClick, className: cn("absolute bottom-1 z-20", side === "start" ? "left-1" : "right-1"), children: _jsx(Icon, {}) }));
 }
 function OverflowFade({ side, visible, }) {
     return (_jsx("div", { "aria-hidden": true, "data-slot": "kanban-overflow-fade", "data-side": side, className: cn("pointer-events-none absolute inset-y-0 z-10 w-10 to-transparent transition-opacity", side === "start"

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 p-1", 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/select.js

@@ -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, 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 })] }));
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn(optionRow, optionState.focus, optionState.checked, dataDisabledState, inlineIcon.default, "pr-8 *:[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/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

@@ -65,7 +65,7 @@ function TabsTrigger({ className, ...props }) {
     return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn(tabsTriggerVariants(), className), ...props }));
 }
 function TabsContent({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 text-sm", focusRing, className), ...props }));
+    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 p-2 text-sm", focusRing, className), ...props }));
 }
 /**
  * Tab-styled link for `TabsNav`. Pass `active` from the route: the active

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,19 @@ 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: notifications occupy normal flow in their mount area. Hidden
+ * and overflow notifications take no space or keyboard stops. Hovering or
+ * focusing the stack expands the visible notifications (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 !transform-none 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]:hidden data-[expanded=false]:data-[front=false]:hidden"),
     // 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 +68,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 +96,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: "min-w-0", onFocus: () => setFocusWithin(true), onBlur: onBlur, children: _jsx(Sonner, { theme: theme, className: "toaster group !relative !inset-auto !transform-none flex !w-full flex-col gap-3 overflow-visible p-2 data-[x-position=right]:items-end data-[x-position=center]:items-center data-[y-position=bottom]:flex-col-reverse", style: { fontFamily: "var(--font-sans)", height: "auto" }, 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.3",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",

package/theme.css

@@ -227,6 +227,12 @@
  * without `!`. Size and flush still set the variable on `[data-slot=card]`.
  */
 @layer components {
+  @container pagination (max-width: 36rem) {
+    [data-slot="pagination-content"]:has([aria-current="page"])
+      > li:not(:first-child):not(:last-child):not(:has([aria-current="page"])) {
+      display: none;
+    }
+  }
   [data-slot="card"] {
     padding-block: var(--card-p);
   }