atlas-react-kit 1.2.1 → 1.2.3

package/dist/internal/overlay-styles.js

@@ -17,6 +17,11 @@ export const overlaySideSlide = "data-[side=bottom]:slide-in-from-top-2 data-[si
 export const overlayFade = "duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0";
 /** Fade plus a slight zoom, for panels (the backdrop only fades). */
 export const overlayFadeZoom = `${overlayFade} data-open:zoom-in-95 data-closed:zoom-out-95`;
+/**
+ * A panel opened from a trigger (Popover, Select, DropdownMenu): the
+ * surface, sliding in from the trigger's side with a fade and zoom.
+ */
+export const anchoredPanel = `${overlaySurface} ${overlaySideSlide} ${overlayFadeZoom}`;
 /**
  * Base of a menu or listbox row (SelectItem, DropdownMenuItem, Combobox and
  * SearchPicker options). Each component adds its own right padding and

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;
@@ -97,6 +97,13 @@ export declare const controlSize: {
  * tailwind-merge then drops the `text-xs`.
  */
 export declare const controlText = "text-xs font-semibold tracking-widest whitespace-nowrap uppercase";
+/**
+ * Secondary text under a title (CardDescription, PopoverDescription,
+ * 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. */
@@ -97,6 +97,13 @@ export const controlSize = {
  * tailwind-merge then drops the `text-xs`.
  */
 export const controlText = "text-xs font-semibold tracking-widest whitespace-nowrap uppercase";
+/**
+ * Secondary text under a title (CardDescription, PopoverDescription,
+ * 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 items-start justify-between gap-2", children: [_jsxs("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-widest uppercase", children: [column.color ? (_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-full", style: { backgroundColor: column.color } })) : null, _jsx("span", { className: "leading-tight", children: column.label })] }), _jsxs("span", { className: "flex shrink-0 flex-col items-end gap-0.5 text-muted-foreground tabular-nums", children: [_jsx("span", { className: "text-xs", children: count }), column.badge ? (_jsx("span", { className: "text-[10px] font-medium", children: column.badge })) : null] })] }), _jsx("div", { className: "flex min-h-32 flex-1 flex-col gap-2 overflow-y-auto pr-1", children: loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-20" }), _jsx(Skeleton, { className: "h-16" })] })) : (_jsxs(_Fragment, { children: [children, _jsx("p", { "data-slot": "kanban-column-empty", "aria-hidden": !empty, className: cn("border border-dashed px-3 py-6 text-center text-xs text-muted-foreground", !empty && "hidden"), children: emptyLabel })] })) })] }));
+    return (_jsxs("div", { ref: ref, "data-slot": "kanban-column", "data-drop-target": isDropTarget || undefined, className: cn("flex snap-start flex-col gap-3 p-3", "bg-muted/40 ring-1 ring-foreground/5", "data-drop-target:bg-muted/60 data-drop-target:ring-2 data-drop-target:ring-ring/60", columnSize, className), children: [_jsxs("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/picker-shell.d.ts

@@ -64,6 +64,8 @@ export type PickerTriggerProps = {
     "aria-labelledby"?: string;
     /** Forwarded to the trigger, e.g. the id of a hint or error text. */
     "aria-describedby"?: string;
+    /** Forwarded to the trigger; a form field sets it for `focusFirstInvalid`. */
+    "data-field-name"?: string;
     /** Popover side. Defaults to `bottom`; Radix still flips on collision. */
     side?: React.ComponentProps<typeof PopoverContent>["side"];
     /** Month shown when the popover opens; falls back to the selected date. */
@@ -112,5 +114,5 @@ type PickerShellProps = Omit<PickerTriggerProps, "placeholder"> & {
  * Form-control trigger plus the viewport-clamped popover holding the
  * calendar, any extra rows, and an optional Clear row.
  */
-export declare function PickerShell({ id, disabled, className, contentClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, side, defaultMonth, minDate, maxDate, calendarProps, empty, label, dialogLabel, open, onOpenChange, calendar, onClear, clearDisabled, children, }: PickerShellProps): React.JSX.Element;
+export declare function PickerShell({ id, disabled, className, contentClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "data-field-name": fieldName, side, defaultMonth, minDate, maxDate, calendarProps, empty, label, dialogLabel, open, onOpenChange, calendar, onClear, clearDisabled, children, }: PickerShellProps): React.JSX.Element;
 export {};

package/dist/picker-shell.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { CalendarIcon } from "lucide-react";
 import { Button } from "./button.js";
 import { toDate, } from "./internal/date-like.js";
-import { PICKER_COLLISION_PADDING, pickerContentClassName, pickerTriggerClassName, pickerValueId, } from "./internal/form-control.js";
+import { fieldNameProps, PICKER_COLLISION_PADDING, pickerContentClassName, pickerTriggerClassName, pickerValueId, } from "./internal/form-control.js";
 import { LazyCalendar, preloadCalendar } from "./lazy-calendar.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "./utils.js";
@@ -39,8 +39,8 @@ function limitCalendarProps(calendarProps, minDate, maxDate) {
  * Form-control trigger plus the viewport-clamped popover holding the
  * calendar, any extra rows, and an optional Clear row.
  */
-export function PickerShell({ id, disabled, className, contentClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, side, defaultMonth, minDate, maxDate, calendarProps, empty, label, dialogLabel, open, onOpenChange, calendar, onClear, clearDisabled = false, children, }) {
-    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", disabled: disabled, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "data-empty": empty, className: cn(pickerTriggerClassName, className), onPointerEnter: preloadCalendar, onFocus: preloadCalendar, children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), _jsx("span", { "data-slot": "date-picker-value", className: "min-w-0 text-left whitespace-normal", id: id ? pickerValueId(id) : undefined, children: label })] }) }), _jsxs(PopoverContent, { align: "start", side: side, collisionPadding: PICKER_COLLISION_PADDING, "aria-label": dialogLabel, 
+export function PickerShell({ id, disabled, className, contentClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "data-field-name": fieldName, side, defaultMonth, minDate, maxDate, calendarProps, empty, label, dialogLabel, open, onOpenChange, calendar, onClear, clearDisabled = false, children, }) {
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", disabled: disabled, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...fieldNameProps(fieldName), "data-empty": empty, className: cn(pickerTriggerClassName, className), onPointerEnter: preloadCalendar, onFocus: preloadCalendar, children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), _jsx("span", { "data-slot": "date-picker-value", className: "min-w-0 text-left whitespace-normal", id: id ? pickerValueId(id) : undefined, children: label })] }) }), _jsxs(PopoverContent, { align: "start", side: side, collisionPadding: PICKER_COLLISION_PADDING, "aria-label": dialogLabel, 
                 // The calendar's `autoFocus` puts focus on the selected day (or
                 // today) once it loads, as the APG date picker dialog does; Radix
                 // focusing the popover first would leave it on the container.

package/dist/popover.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
-import { OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET, overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
-import { labelText } from "./internal/styles.js";
+import { anchoredPanel, OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET, } from "./internal/overlay-styles.js";
+import { descriptionText, labelText } from "./internal/styles.js";
 import { cn } from "./utils.js";
 function Popover({ ...props }) {
     return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
@@ -12,7 +12,7 @@ function PopoverTrigger({ ...props }) {
     return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...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 }) }));
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, className: cn(anchoredPanel, "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 }) {
     return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
@@ -24,6 +24,6 @@ function PopoverTitle({ 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 }));
+    return (_jsx("p", { "data-slot": "popover-description", className: cn("mt-0.5", descriptionText, className), ...props }));
 }
 export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };

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/search-picker.js

@@ -6,7 +6,7 @@ import { Label } from "./label.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";
+import { cn, onInputChange } from "./utils.js";
 export { foldSearchText };
 /**
  * Default SearchPicker filter: the folded label includes the folded query.
@@ -63,14 +63,10 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
     }, [onSelect]);
     const onKeyDown = (event) => {
         const handled = handleListboxKey(event, {
+            items: filtered,
             highlight,
-            length: filtered.length,
             setHighlight,
-            onEnter: (index) => {
-                const item = filtered[index];
-                if (item)
-                    selectItem(item);
-            },
+            onPick: selectItem,
         });
         if (handled || event.key !== "Escape")
             return;
@@ -81,6 +77,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, ...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 })] }));
+    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: onInputChange(setQuery), 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

@@ -3,7 +3,7 @@ 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, 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 { anchoredPanel, menuLabel, optionRow, OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET, } from "./internal/overlay-styles.js";
 import { cn } from "./utils.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
 /**
@@ -22,17 +22,17 @@ 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, 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" }) })] }));
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn(fieldSurface, focusRing, invalidState, disabledState, 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 = 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" &&
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", "data-align-trigger": position === "item-aligned", className: cn(anchoredPanel, "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, {})] }) }));
 }
 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/dist/toggle-group.d.ts

@@ -12,6 +12,6 @@ type ToggleGroupLayoutProps = {
     /** Lay items out in a row or a column. Default `horizontal`. */
     orientation?: "horizontal" | "vertical";
 };
-declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & ToggleGroupLayoutProps): React.JSX.Element;
+declare function ToggleGroup({ className, variant, size, spacing, orientation, children, onKeyDown, onPointerDown, onFocus, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & ToggleGroupLayoutProps): React.JSX.Element;
 declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): React.JSX.Element;
 export { ToggleGroup, ToggleGroupItem };

package/dist/toggle-group.js

@@ -5,15 +5,49 @@ import {} from "class-variance-authority";
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import { cn } from "./utils.js";
 import { toggleVariants } from "./toggle.js";
+/** The keys Radix's roving focus moves between items with. */
+const arrowKeys = new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"]);
+function isItem(target) {
+    return (target instanceof HTMLElement && target.dataset.slot === "toggle-group-item");
+}
 const ToggleGroupContext = React.createContext({
     size: "default",
     variant: "default",
     spacing: 2,
     orientation: "horizontal",
 });
-function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", children, ...props }) {
+function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", children, onKeyDown, onPointerDown, onFocus, ...props }) {
+    // The item an arrow key was pressed on, until focus lands on the next one.
+    // A single group's items are radios, and focus that arrives by arrow key
+    // selects, as in any radio group; Tab and clicks do not.
+    const arrowFrom = React.useRef(null);
+    const selectsOnArrow = props.type === "single" && props.rovingFocus !== false;
     const context = React.useMemo(() => ({ variant, size, spacing, orientation }), [variant, size, spacing, orientation]);
-    return (_jsx(ToggleGroupPrimitive.Root, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, style: { "--gap": spacing }, className: cn("group/toggle-group flex w-fit max-w-full flex-row flex-wrap items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-none data-vertical:flex-col data-vertical:flex-nowrap data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: context, children: children }) }));
+    return (_jsx(ToggleGroupPrimitive.Root, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, onKeyDown: (event) => {
+            onKeyDown?.(event);
+            // Radix moves focus to the next item once the key has bubbled up.
+            if (selectsOnArrow &&
+                arrowKeys.has(event.key) &&
+                isItem(event.target) &&
+                !(event.metaKey || event.ctrlKey || event.altKey || event.shiftKey)) {
+                arrowFrom.current = event.target;
+            }
+        }, onPointerDown: (event) => {
+            onPointerDown?.(event);
+            arrowFrom.current = null;
+        }, onFocus: (event) => {
+            onFocus?.(event);
+            const from = arrowFrom.current;
+            arrowFrom.current = null;
+            const item = event.target;
+            // Clicking runs the selection Radix already owns, onValueChange included.
+            if (from &&
+                from !== item &&
+                isItem(item) &&
+                item.getAttribute("aria-checked") !== "true") {
+                item.click();
+            }
+        }, style: { "--gap": spacing }, className: cn("group/toggle-group flex w-fit max-w-full flex-row flex-wrap items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-none data-vertical:flex-col data-vertical:flex-nowrap data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: context, children: children }) }));
 }
 function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
     const context = React.useContext(ToggleGroupContext);

package/package.json

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

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

@@ -61,7 +61,7 @@ Import each component from its subpath, e.g.
 | 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`                                                                          |
-| Focus the first invalid field when a submit fails          | `focusFirstInvalid` from `form/focus-first-invalid`                                                                     |
+| Focus the first invalid field when a submit fails          | `focusFirstInvalid` from `form/focus-first-invalid`; fields without a `field` prop take `fieldName={field.name}`        |
 | 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`                                                                     |

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