atlas-react-kit 1.2.4 → 1.2.6

package/COMPONENTS.md

@@ -74,7 +74,7 @@ theme from `next-themes`, so toast consumers install that too.
 | `table`                       | Table, header, body, footer, row, head, cell, caption; root scroller is `min-w-0 overflow-x-auto` with a fade cue; cells are `px-2` below `sm`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | `table-body-skeleton`         | `TableBodySkeleton`; `columns`, optional `rows` (default 5)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `tabs`                        | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabsNav`, `TabsNavLink`, `tabsListVariants`, `tabsTriggerVariants`; list `variant` is `default` or `line`; `TabsNavLink` is the link inside `TabsNav` (required `active`, `asChild` for a router link); `TabsNav` / `TabsList` scroll horizontally only (`overflow-y` hidden, `p-1` counted in the scroller height, edge fade, active item into view, mouse drag scrolls the row) — do not wrap them in `overflow-x-auto`                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `toast`                       | `Toaster`, `toast`; mount one `Toaster` (`position`, `closeButton` (default on), `expand`, `visibleToasts`, `duration`), then `toast(message, options)`. The stack expands on hover and while keyboard focus is inside it; collapsed toasts behind the front one are hidden, `.success`, `.info`, `.warning`, `.error`, `.loading`, `.dismiss(id?)`. Options: `id` (replaces that toast), `description`, `duration`, `action` / `cancel` as `{ label, onClick }`. Kit-owned API: no toast library is exposed                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `toast`                       | `Toaster`, `toast`; mount one `Toaster` (`position`, `closeButton` (default on), `expand`, `visibleToasts`, `duration`), then `toast(message, options)`. The stack expands on hover and while keyboard focus is inside it; collapsed toasts behind the front one are hidden, `.success`, `.info`, `.warning`, `.error`, `.loading`, `.dismiss(id?)`. Options: `id` (replaces that toast), `description`, `duration`, `action` / `cancel` as `{ label, onClick }`. The toaster list is clamped to `calc(100vw - 2rem)` so it stays inside a narrow viewport. Kit-owned API: no toast library is exposed                                                                                                                                                                                                                                                                                                                  |
 | `toggle`                      | `Toggle`, `toggleVariants`; `variant`, `size`. `selectedToggleChrome` is deprecated: `toggleVariants()` already includes it. Pressed state is the selected wash, text, and border via `data-state=on`, `aria-pressed`, and `aria-checked`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | `toggle-group`                | `ToggleGroup`, `ToggleGroupItem`; `variant`, `size`. Items share `toggleVariants`, so single (radio) and multiple selections match a pressed `Toggle`. In a single group the arrow keys select as they move focus, like radios; Tab and clicks do not. A multiple group only moves focus                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 | `theme-provider`              | `ThemeProvider`, `useTheme`; optional `storageKey` (default `atlas-theme`), `enableShortcut` for the `d` toggle                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |

package/dist/checkbox.js

@@ -6,6 +6,6 @@ import { choiceHitArea, disabledState, focusRing, invalidState, } from "./intern
 import { cn } from "./utils.js";
 import { CheckIcon } from "lucide-react";
 function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn(focusRing, invalidState, disabledState, choiceHitArea, "peer relative flex size-4.5 shrink-0 items-center justify-center rounded-none border border-input bg-transparent transition-shadow group-has-disabled/field:opacity-50 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn(focusRing, invalidState, disabledState, choiceHitArea, "peer relative flex size-4.5 shrink-0 items-center justify-center rounded-none border border-input bg-transparent transition-shadow group-has-disabled/field:opacity-50 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
 }
 export { Checkbox };

package/dist/combobox.js

@@ -6,6 +6,7 @@ import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { formControlTriggerClassName } from "./internal/form-control.js";
 import { handleListboxKey } from "./internal/listbox-navigation.js";
+import { clamp } from "./internal/math.js";
 import { Listbox, ListboxEmptyStatus, listboxInputAria, PickerOption, } from "./internal/listbox-option.js";
 import { createSearchIndex, filterSearchIndex, foldSearchText, normalizeSearchQuery, } from "./internal/search.js";
 import { emptyValueText } from "./internal/styles.js";
@@ -53,7 +54,7 @@ function resolveCreateValue(query, existingValues, normalize) {
 export function Combobox({ options, value, onValueChange, placeholder = "Select", searchPlaceholder = "Search", emptyText, disabled, id, className, listClassName, contentClassName, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, creatable = false, normalizeCreateValue = defaultNormalizeCreateValue, createLabel = defaultCreateLabel, ...props }) {
     const [open, setOpen] = React.useState(false);
     const [query, setQuery] = React.useState("");
-    const [highlight, setHighlight] = React.useState(0);
+    const [highlightIndex, setHighlight] = React.useState(0);
     const listId = React.useId();
     const generatedId = React.useId();
     const triggerId = id ?? generatedId;
@@ -84,6 +85,7 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
             : null;
     }, [creatable, query, existingValues, normalizeCreateValue, createLabel]);
     const list = createOption ? [...filtered, createOption] : filtered;
+    const highlight = clamp(highlightIndex, 0, Math.max(0, list.length - 1));
     const onOpenChange = (next) => {
         setOpen(next);
         if (!next) {

package/dist/error-boundary.d.ts

@@ -10,9 +10,7 @@ type ErrorFallbackProps = {
     className?: string;
 };
 /**
- * Presentational recovery UI used by `ErrorBoundary`: a large `EmptyPanel`
- * with the message and recovery buttons. Exported so the markup can be
- * tested without throwing during render.
+ * Recovery UI used by `ErrorBoundary`: a large `EmptyPanel` with recovery buttons.
  */
 export declare function ErrorFallback({ message, onRetry, onReload, className, }: ErrorFallbackProps): import("react").JSX.Element;
 type ErrorBoundaryProps = {
@@ -24,15 +22,14 @@ type ErrorBoundaryProps = {
     onError?: (error: Error, info: ErrorInfo) => void;
 };
 type ErrorBoundaryState = {
-    error: Error | null;
+    hasError: boolean;
 };
 /**
  * Generic React error boundary with retry (reset) and full-page reload.
- * Not tied to any data library.
  */
 export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
     state: ErrorBoundaryState;
-    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    static getDerivedStateFromError(): ErrorBoundaryState;
     componentDidCatch(error: Error, info: ErrorInfo): void;
     retry: () => void;
     reload: () => void;

package/dist/error-boundary.js

@@ -5,9 +5,7 @@ import { Button } from "./button.js";
 import { EmptyPanel } from "./empty-panel.js";
 import { cn } from "./utils.js";
 /**
- * Presentational recovery UI used by `ErrorBoundary`: a large `EmptyPanel`
- * with the message and recovery buttons. Exported so the markup can be
- * tested without throwing during render.
+ * Recovery UI used by `ErrorBoundary`: a large `EmptyPanel` with recovery buttons.
  */
 export function ErrorFallback({ message = "Something went wrong.", onRetry, onReload, className, }) {
     return (_jsxs(EmptyPanel, { role: "alert", "data-slot": "error-boundary", size: "lg", 
@@ -16,24 +14,23 @@ export function ErrorFallback({ message = "Something went wrong.", onRetry, onRe
 }
 /**
  * Generic React error boundary with retry (reset) and full-page reload.
- * Not tied to any data library.
  */
 export class ErrorBoundary extends Component {
-    state = { error: null };
-    static getDerivedStateFromError(error) {
-        return { error };
+    state = { hasError: false };
+    static getDerivedStateFromError() {
+        return { hasError: true };
     }
     componentDidCatch(error, info) {
         this.props.onError?.(error, info);
     }
     retry = () => {
-        this.setState({ error: null });
+        this.setState({ hasError: false });
     };
     reload = () => {
         window.location.reload();
     };
     render() {
-        if (!this.state.error)
+        if (!this.state.hasError)
             return this.props.children;
         return (_jsx(ErrorFallback, { message: this.props.message, onRetry: this.retry, onReload: this.reload }));
     }

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 { errorText, labelText } from "./internal/styles.js";
+import { errorText, labelText, selectedState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 import { Label } from "./label.js";
 import { Separator } from "./separator.js";
@@ -47,7 +47,7 @@ function FieldContent({ className, ...props }) {
     return (_jsx("div", { "data-slot": "field-content", className: cn("group/field-content flex flex-1 flex-col gap-1 leading-snug", className), ...props }));
 }
 function FieldLabel({ className, ...props }) {
-    return (_jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-selected has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-selected", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className), ...props }));
+    return (_jsx(Label, { "data-slot": "field-label", className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-4", selectedState.checkedWithin, "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className), ...props }));
 }
 function FieldTitle({ className, ...props }) {
     return (_jsx("div", { "data-slot": "field-label", className: cn(labelText, "flex w-fit items-center gap-2 group-data-[disabled=true]/field:opacity-50 in-data-[slot=field-label]:font-semibold", className), ...props }));

package/dist/internal/styles.d.ts

@@ -25,6 +25,7 @@ export declare const fieldSurface = "w-full min-w-0 rounded-none border border-i
  * the wash alone is 1.2:1 against the page. One string per state attribute.
  */
 export declare const selectedState: {
+    checkedWithin: string;
     /**
      * Toggle and ToggleGroupItem. Radix Toggle sets `data-state=on` and
      * `aria-pressed`; group items always set `data-state=on`, add

package/dist/internal/styles.js

@@ -25,6 +25,7 @@ export const fieldSurface = "w-full min-w-0 rounded-none border border-input bg-
  * the wash alone is 1.2:1 against the page. One string per state attribute.
  */
 export const selectedState = {
+    checkedWithin: "has-data-checked:border-selected-foreground has-data-checked:bg-selected has-data-checked:text-selected-foreground",
     /**
      * Toggle and ToggleGroupItem. Radix Toggle sets `data-state=on` and
      * `aria-pressed`; group items always set `data-state=on`, add

package/dist/internal/tabs-styles.js

@@ -60,10 +60,14 @@ const tabsTriggerVariants = cva([
     // flex-none + px-4: every trigger and TabsNav link keeps the same
     // horizontal padding. flex-1 used to grow short labels and make the
     // longest (e.g. Apple Reminders) look tighter. No last-child padding.
-    'relative inline-flex h-full min-w-max flex-none items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-[orientation="vertical"]/tabs:w-full group-data-[orientation="vertical"]/tabs:justify-start group-data-[orientation="vertical"]/tabs:px-4 group-data-[orientation="vertical"]/tabs:py-2 hover:text-foreground has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground',
+    // py-0: h-full already fills the h-7 row. py-1.5 plus the 16px line
+    // and 1px border needed ~32px, so the 28px list overflowed on y.
+    'relative inline-flex h-full min-w-max flex-none items-center justify-center gap-2 border border-transparent px-4 py-0 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-[orientation="vertical"]/tabs:w-full group-data-[orientation="vertical"]/tabs:justify-start group-data-[orientation="vertical"]/tabs:px-4 group-data-[orientation="vertical"]/tabs:py-2 hover:text-foreground has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground',
     inlineIcon.default,
     'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state="active"]:border-transparent group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent',
     selectedState.active,
-    'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation="horizontal"]/tabs:after:inset-x-0 group-data-[orientation="horizontal"]/tabs:after:bottom-[-5px] group-data-[orientation="horizontal"]/tabs:after:h-0.5 group-data-[orientation="vertical"]/tabs:after:inset-y-0 group-data-[orientation="vertical"]/tabs:after:-right-1 group-data-[orientation="vertical"]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state="active"]:after:opacity-100',
+    // The line-variant bar stays inside the trigger. Hanging it at
+    // bottom-[-5px] made the 28px list's scrollHeight 32 even with py-0.
+    'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation="horizontal"]/tabs:after:inset-x-0 group-data-[orientation="horizontal"]/tabs:after:bottom-0 group-data-[orientation="horizontal"]/tabs:after:h-0.5 group-data-[orientation="vertical"]/tabs:after:inset-y-0 group-data-[orientation="vertical"]/tabs:after:right-0 group-data-[orientation="vertical"]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state="active"]:after:opacity-100',
 ]);
 export { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants };

package/dist/kanban.js

@@ -7,7 +7,7 @@ import { CheckCircle2, ChevronLeft, ChevronRight, GripVertical, Trash2, } from "
 import { Button } from "./button.js";
 import { KANBAN_COMPLETE_ID, KANBAN_DELETE_ID, buildKanbanGroups, kanbanOverflowEdges, kanbanScrollBy, resolveKanbanDrop, } from "./internal/kanban-layout.js";
 import { configureCardSortablePlugins, configureKanbanPlugins, } from "./internal/kanban-plugins.js";
-import { focusRingWithin } from "./internal/styles.js";
+import { focusRing } from "./internal/styles.js";
 import { revealInline } from "./internal/use-horizontal-overflow.js";
 import { Skeleton } from "./skeleton.js";
 import { cn } from "./utils.js";
@@ -134,6 +134,7 @@ function KanbanColumnView({ column, count, emptyLabel, loading, className, child
 }
 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");
+const stopFocus = cn(focusRing, "relative focus-visible:z-10");
 function stopClick(event) {
     event.stopPropagation();
 }
@@ -150,9 +151,7 @@ function KanbanCardViewImpl({ item, index, column, onCardClick, className, rende
     });
     return (_jsxs("div", { ref: ref, "data-slot": "kanban-card", "data-dragging": isDragging || undefined, className: cn(cardChrome, "shadow-sm transition-[box-shadow,opacity,border-color]", 
         // The overlay moves; the source keeps its slot.
-        "data-dragging:pointer-events-none data-dragging:invisible", 
-        // One ring on the card for the grip and the body alike.
-        focusRingWithin, onCardClick && "hover:border-foreground/15", className), children: [_jsx("button", { type: "button", ref: handleRef, "data-slot": "kanban-card-handle", "aria-label": "Drag to move", onClick: stopClick, className: cn(handleChrome, "cursor-grab outline-none hover:bg-muted/50 active:cursor-grabbing"), children: _jsx(GripVertical, { className: "size-4", "aria-hidden": true }) }), onCardClick ? (_jsx("button", { type: "button", "data-slot": "kanban-card-body", onClick: () => onCardClick(item), className: "min-w-0 flex-1 cursor-pointer p-3 text-left outline-none hover:bg-muted/20", children: children })) : (_jsx("div", { "data-slot": "kanban-card-body", className: "min-w-0 flex-1 p-3", children: children }))] }));
+        "data-dragging:pointer-events-none data-dragging:invisible", onCardClick && "hover:border-foreground/15", className), children: [_jsx("button", { type: "button", ref: handleRef, "data-slot": "kanban-card-handle", "aria-label": "Drag to move", onClick: stopClick, className: cn(handleChrome, stopFocus, "cursor-grab hover:bg-muted/50 active:cursor-grabbing"), children: _jsx(GripVertical, { className: "size-4", "aria-hidden": true }) }), onCardClick ? (_jsx("button", { type: "button", "data-slot": "kanban-card-body", onClick: () => onCardClick(item), className: cn("min-w-0 flex-1 cursor-pointer p-3 text-left hover:bg-muted/20", stopFocus), children: children })) : (_jsx("div", { "data-slot": "kanban-card-body", className: "min-w-0 flex-1 p-3", children: children }))] }));
 }
 /**
  * Memoized so a board update re-renders only the cards whose item, index or

package/dist/markdown.js

@@ -35,7 +35,7 @@ const markdownComponents = {
     h3: ({ children }) => (_jsx("h3", { className: headingClass("text-base"), children: children })),
     p: ({ children }) => _jsx("p", { className: "text-sm leading-relaxed", children: children }),
     ul: ({ children }) => (_jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm", children: children })),
-    ol: ({ children }) => (_jsx("ol", { className: "list-decimal space-y-1 pl-5 text-sm", children: children })),
+    ol: ({ children, start }) => (_jsx("ol", { start: start, className: "list-decimal space-y-1 pl-5 text-sm", children: children })),
     li: ({ children }) => _jsx("li", { className: "leading-relaxed", children: children }),
     blockquote: ({ children }) => (_jsx("blockquote", { className: "border-l-2 border-input pl-3 text-sm text-muted-foreground", children: children })),
     a: ({ href, children }) => href ? (_jsx("a", { href: href, className: "text-selected-foreground underline underline-offset-2", ...(href.startsWith("http")

package/dist/search-picker.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
 import { handleListboxKey } from "./internal/listbox-navigation.js";
+import { clamp } from "./internal/math.js";
 import { Listbox, ListboxEmptyStatus, listboxInputAria, PickerOption, } from "./internal/listbox-option.js";
 import { createSearchIndex, filterSearchIndex, foldSearchText, normalizeSearchQuery, } from "./internal/search.js";
 import { cn, onInputChange } from "./utils.js";
@@ -42,10 +43,9 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
         return index >= 0 ? index : 0;
     }, [filtered, getValue, value]);
     const rows = React.useMemo(() => filtered.map((item) => ({ item, value: getValue(item) })), [filtered, getValue]);
-    const [highlight, setHighlight] = React.useState(selectedIndex);
-    // Reset the highlight while rendering, not in an effect, when the query or
-    // the selected row changes: an effect commits every keystroke twice, once
-    // with the stale highlight and again with the reset.
+    const [highlightIndex, setHighlight] = React.useState(selectedIndex);
+    const highlight = clamp(highlightIndex, 0, Math.max(0, filtered.length - 1));
+    // Reset during render so a query or selection change commits only once.
     const [highlightFor, setHighlightFor] = React.useState({
         query,
         selectedIndex,

package/dist/switch.js

@@ -10,6 +10,6 @@ import { cn } from "./utils.js";
  * primitives; checked uses the primary fill, as `Checkbox` does.
  */
 function Switch({ className, ...props }) {
-    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn(focusRing, invalidState, disabledState, choiceHitArea, "peer relative inline-flex h-5 w-9 shrink-0 items-center rounded-none border border-transparent bg-input p-0.5 shadow-xs transition-colors data-checked:bg-primary dark:data-checked:bg-primary", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block size-3.5 rounded-none bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground" }) }));
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn(focusRing, invalidState, disabledState, choiceHitArea, "peer relative inline-flex h-5 w-9 shrink-0 items-center rounded-none border border-transparent bg-input p-0.5 shadow-xs transition-colors data-checked:bg-primary", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block size-3.5 rounded-none bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground" }) }));
 }
 export { Switch };

package/dist/toast.js

@@ -56,7 +56,7 @@ const toast = Object.assign(show(sonnerToast), {
  * so the status icon and copy read as one unit.
  */
 const classNames = {
-    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"),
+    toast: cn(focusRing, "relative flex w-max max-w-[min(356px,calc(100vw-2rem))] max-[600px]:!w-full 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.
@@ -95,6 +95,9 @@ 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", style: { fontFamily: "var(--font-sans)" }, 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)",
+                maxWidth: "calc(100vw - 2rem)",
+            }, 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.4",
+  "version": "1.2.6",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",