@nexub/react 7.3.0 → 7.4.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.3.0",
+  "version": "7.4.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",

package/dist/components/Avatar/Avatar.d.ts

@@ -3,11 +3,14 @@ import { type VariantProps } from 'class-variance-authority';
 export declare const avatarVariants: (props?: ({
     size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AvatarStatus = 'online' | 'away' | 'busy' | 'offline';
 export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof avatarVariants> {
     src?: string;
     name?: string;
     fallback?: React.ReactNode;
     badge?: boolean;
     badgeColor?: string;
+    /** Presence dot, added to the accessible name ("Ada Lovelace, Away"). Replaces `badge` when both are set. */
+    status?: AvatarStatus;
 }
 export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Avatar/Avatar.js

@@ -4,6 +4,7 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 import { safeSrc } from "../../utils/safeHref.js";
+import { useNexubMessages } from "../NexubProvider/NexubProvider.js";
 const avatarVariants = cva(
   "relative inline-flex items-center justify-center shrink-0 rounded-full overflow-hidden bg-[var(--color-surface-container-high)] text-[var(--color-on-surface-muted)] font-medium select-none",
   {
@@ -28,6 +29,12 @@ const badgeSizeMap = {
   lg: "h-3 w-3",
   xl: "h-3.5 w-3.5"
 };
+const statusColor = {
+  online: "bg-[var(--color-success)]",
+  away: "bg-[var(--color-warning)]",
+  busy: "bg-[var(--color-error)]",
+  offline: "bg-[var(--color-outline)]"
+};
 function getInitials(name) {
   const parts = name.trim().split(/\s+/);
   const first = parts[0] ?? "";
@@ -44,19 +51,30 @@ const Avatar = React.forwardRef(
     fallback,
     badge,
     badgeColor,
+    status,
     ...props
   }, ref) => {
     const src = safeSrc(srcProp);
     const [failedSrc, setFailedSrc] = React.useState();
+    const [pendingSrc, setPendingSrc] = React.useState();
+    const hideUntilLoaded = React.useCallback(
+      (img) => {
+        if (img && !img.complete) setPendingSrc(img.getAttribute("src") ?? void 0);
+      },
+      []
+    );
+    const messages = useNexubMessages();
+    const statusLabel = status ? messages.presence[status] : void 0;
+    const label = [name, statusLabel].filter(Boolean).join(", ") || void 0;
     const showImage = Boolean(src) && failedSrc !== src;
     const initials = name ? getInitials(name) : null;
-    const labelled = Boolean(name || props["aria-label"] || props["aria-labelledby"]);
+    const labelled = Boolean(label || props["aria-label"] || props["aria-labelledby"]);
     return /* @__PURE__ */ jsxs(
       "span",
       {
         ref,
         className: cn(avatarVariants({ size }), className),
-        "aria-label": name ?? void 0,
+        "aria-label": label,
         role: labelled ? "img" : void 0,
         "aria-hidden": labelled ? void 0 : true,
         ...props,
@@ -66,7 +84,12 @@ const Avatar = React.forwardRef(
             {
               src,
               alt: name ?? "",
-              className: "h-full w-full object-cover",
+              ref: hideUntilLoaded,
+              className: cn(
+                "h-full w-full object-cover transition-opacity duration-effects-default ease-effects-default",
+                pendingSrc === src && "opacity-0"
+              ),
+              onLoad: () => setPendingSrc(void 0),
               onError: () => setFailedSrc(src)
             }
           ) : initials ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: initials }) : fallback ? fallback : (
@@ -82,13 +105,13 @@ const Avatar = React.forwardRef(
               }
             )
           ),
-          badge && /* @__PURE__ */ jsx(
+          (badge || status) && /* @__PURE__ */ jsx(
             "span",
             {
               className: cn(
                 "absolute bottom-0 end-0 rounded-full ring-2 ring-[var(--color-surface)]",
                 badgeSizeMap[size ?? "md"],
-                badgeColor ?? "bg-[var(--color-success)]"
+                status ? statusColor[status] : badgeColor ?? "bg-[var(--color-success)]"
               ),
               "aria-hidden": "true"
             }

package/dist/components/Avatar/index.d.ts

@@ -1,2 +1,2 @@
 export { Avatar, avatarVariants } from './Avatar.js';
-export type { AvatarProps } from './Avatar.js';
+export type { AvatarProps, AvatarStatus } from './Avatar.js';

package/dist/components/Button/Button.d.ts

@@ -14,7 +14,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     /** Async feedback. `loading` blocks clicks (aria-disabled, focus kept),
      *  `success` draws a check, `error` shakes once. Not applied with `asChild`. */
     status?: ButtonStatus;
-    /** Alias for `status="loading"`. */
+    /** Alias for `status="loading"`. A `type="submit"` button also shows loading
+     *  while its parent `<form action>` is pending (React 19 `useFormStatus`). */
     loading?: boolean;
     /** Announced while loading. @default 'Loading' */
     loadingLabel?: string;

package/dist/components/Button/Button.js

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { useFormStatus } from "react-dom";
 import { Slot } from "@radix-ui/react-slot";
 import { Loader2 } from "@nexub/icons";
 import { cva } from "class-variance-authority";
@@ -67,6 +68,22 @@ const buttonVariants = cva(
   }
 );
 const CheckIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { className: "nx-check-draw", pathLength: 1, d: "M20 6 9 17l-5-5" }) });
+const SPINNER_DELAY = 150;
+const SPINNER_MIN = 400;
+function useSpinner(busy) {
+  const [shown, setShown] = React.useState(busy);
+  const shownAt = React.useRef(0);
+  React.useEffect(() => {
+    if (shown) shownAt.current = Date.now();
+  }, [shown]);
+  React.useEffect(() => {
+    if (busy === shown) return;
+    const wait = busy ? SPINNER_DELAY : Math.max(0, SPINNER_MIN - (Date.now() - shownAt.current));
+    const t = setTimeout(() => setShown(busy), wait);
+    return () => clearTimeout(t);
+  }, [busy, shown]);
+  return shown;
+}
 const Button = React.forwardRef(
   ({
     className,
@@ -89,7 +106,9 @@ const Button = React.forwardRef(
     children,
     ...props
   }, ref) => {
-    const status = statusProp ?? (loading ? "loading" : "idle");
+    const formPending = useFormStatus().pending && props.type === "submit";
+    const status = statusProp ?? (loading || formPending ? "loading" : "idle");
+    const spinner = useSpinner(status === "loading");
     const handlePointerMove = usePointerSheen(magnetic, onPointerMove);
     const sharedProps = {
       className: cn(
@@ -111,7 +130,7 @@ const Button = React.forwardRef(
     }
     const busy = status === "loading";
     const swapLabel = status === "success" && successLabel !== void 0;
-    const overlay = busy ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) : status === "success" && !swapLabel ? /* @__PURE__ */ jsx(CheckIcon, {}) : null;
+    const overlay = spinner ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }) : status === "success" && !swapLabel ? /* @__PURE__ */ jsx(CheckIcon, {}) : null;
     const announcement = status === "loading" ? loadingLabel : status === "success" ? successLabel ?? "Done" : status === "error" ? errorLabel : "";
     const button = /* @__PURE__ */ jsxs(
       "button",
@@ -130,14 +149,25 @@ const Button = React.forwardRef(
         "data-status": status === "idle" ? void 0 : status,
         ...sharedProps,
         children: [
-          /* @__PURE__ */ jsx("span", { className: cn("contents", overlay && "text-transparent [&_img]:invisible [&_svg]:invisible"), children: swapLabel ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(CheckIcon, {}),
-            successLabel
-          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          successLabel === void 0 ? /* @__PURE__ */ jsxs("span", { className: cn("contents", overlay && "text-transparent [&_img]:invisible [&_svg]:invisible"), children: [
             leadingIcon,
             children,
             trailingIcon
-          ] }) }),
+          ] }) : (
+            // Both labels share one grid cell, so the button is as wide as the wider one
+            // whichever shows; the hidden one keeps its space.
+            /* @__PURE__ */ jsxs("span", { className: cn("inline-grid", overlay && "text-transparent [&_img]:invisible [&_svg]:invisible"), children: [
+              /* @__PURE__ */ jsxs("span", { className: cn("col-start-1 row-start-1 inline-flex items-center justify-center gap-2", swapLabel && "invisible"), "aria-hidden": swapLabel || void 0, children: [
+                leadingIcon,
+                children,
+                trailingIcon
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: cn("col-start-1 row-start-1 inline-flex items-center justify-center gap-2", !swapLabel && "invisible"), "aria-hidden": !swapLabel || void 0, children: [
+                swapLabel ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx("span", { className: "h-4 w-4" }),
+                successLabel
+              ] })
+            ] })
+          ),
           overlay && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true", children: overlay })
         ]
       }

package/dist/components/DataTable/DataTable.d.ts

@@ -91,5 +91,9 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     onRowOrderChange?: (data: TData[]) => void;
     /** Names a row in "Move ‹label›" and the move announcements. @default its position */
     getRowLabel?: (row: TData) => string;
+    /** Shows skeleton rows (one page's worth) and sets aria-busy on the table. */
+    loading?: boolean;
+    /** Shown in a full-width row when there are no rows. @default messages.noResults */
+    emptyState?: React.ReactNode;
 }
-export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, onRowOrderChange, getRowLabel, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;
+export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, onRowOrderChange, getRowLabel, loading, emptyState, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -23,6 +23,7 @@ import { Button } from "../Button/Button.js";
 import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 import { createGridNavigation } from "./gridNavigation.js";
 import { useReorder } from "../Sortable/reorder.js";
+import { Skeleton } from "../Skeleton/Skeleton.js";
 const alignText = {
   start: "text-start",
   end: "text-end",
@@ -170,6 +171,8 @@ function DataTable({
   onExpandedChange,
   onRowOrderChange,
   getRowLabel,
+  loading = false,
+  emptyState,
   caption,
   captionHidden = false,
   className,
@@ -429,6 +432,7 @@ function DataTable({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
         "aria-rowcount": rowWin.virtual ? rows.length + 1 : void 0,
+        "aria-busy": loading || void 0,
         role: grid ? "grid" : void 0,
         onKeyDown: grid ? gridNav.onKeyDown : void 0,
         onFocus: grid ? gridNav.onFocus : void 0,
@@ -528,7 +532,7 @@ function DataTable({
               header.id
             );
           }) }, headerGroup.id)) }),
-          /* @__PURE__ */ jsx(TableBody, { children: rows.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(TableBody, { children: loading ? Array.from({ length: pagination?.pageSize ?? 5 }, (_, i) => /* @__PURE__ */ jsx(TableRow, { "data-loading": "", className: "hover:bg-transparent", children: table.getVisibleLeafColumns().map((c) => /* @__PURE__ */ jsx(TableCell, { className: cn(compact && "py-1.5"), children: /* @__PURE__ */ jsx(Skeleton, {}) }, c.id)) }, i)) : rows.length ? /* @__PURE__ */ jsxs(Fragment, { children: [
             rowWin.before > 0 && /* @__PURE__ */ jsx(Spacer, { height: rowWin.before }),
             rowWin.indexes.map((i) => {
               const row = rows[i];
@@ -564,7 +568,7 @@ function DataTable({
             {
               colSpan: table.getVisibleLeafColumns().length,
               className: "h-24 text-center text-[var(--color-on-surface-muted)]",
-              children: messages.noResults
+              children: emptyState ?? messages.noResults
             }
           ) }) })
         ]

package/dist/components/Progress/Progress.d.ts

@@ -13,5 +13,9 @@ export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     max?: number;
     tone?: ToneValue;
     animated?: boolean;
+    /** `circular` draws a ring; same value/max/indeterminate semantics. @default 'linear' */
+    variant?: 'linear' | 'circular';
+    /** Linear only: splits the bar into N equal steps, filled up to the value. */
+    segments?: number;
 }
 export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Progress/Progress.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
@@ -43,6 +43,18 @@ const progressFillVariants = cva(
     }
   }
 );
+const ringTone = {
+  neutral: "stroke-[var(--color-outline)]",
+  info: "stroke-[var(--color-info)]",
+  success: "stroke-[var(--color-success)]",
+  warning: "stroke-[var(--color-warning)]",
+  danger: "stroke-[var(--color-error)]",
+  leap: "stroke-[var(--color-leap)]",
+  bookub: "stroke-[var(--color-bookub)]",
+  payub: "stroke-[var(--color-payub)]",
+  founderub: "stroke-[var(--color-founderub)]"
+};
+const ringSize = { sm: "size-6", md: "size-10", lg: "size-16" };
 const Progress = React.forwardRef(
   ({
     className,
@@ -51,6 +63,8 @@ const Progress = React.forwardRef(
     value,
     max = 100,
     animated = false,
+    variant = "linear",
+    segments,
     ...props
   }, ref) => {
     const isIndeterminate = value === void 0 || value === null;
@@ -60,31 +74,70 @@ const Progress = React.forwardRef(
     useIsomorphicLayoutEffect(() => {
       fillRef.current?.style.setProperty("width", `${percentage}%`);
     }, [percentage]);
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        role: "progressbar",
-        "aria-valuenow": isIndeterminate ? void 0 : clampedValue,
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
-        className: cn(progressTrackVariants({ size }), className),
-        ...props,
-        children: /* @__PURE__ */ jsx(
-          "div",
+    const aria = {
+      role: "progressbar",
+      "aria-valuenow": isIndeterminate ? void 0 : clampedValue,
+      "aria-valuemin": 0,
+      "aria-valuemax": max
+    };
+    if (variant === "circular") {
+      return /* @__PURE__ */ jsx("div", { ref, ...aria, className: cn("inline-flex", ringSize[size ?? "md"], className), ...props, children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 36 36", className: cn("size-full -rotate-90", isIndeterminate && "animate-spin motion-reduce:animate-none"), "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "15", fill: "none", strokeWidth: "4", className: "stroke-[var(--color-surface-container-high)]" }),
+        /* @__PURE__ */ jsx(
+          "circle",
           {
-            className: cn(
-              progressFillVariants({ tone }),
-              animated && "animate-pulse",
-              isIndeterminate && "animate-[nx-progress-indeterminate_1.4s_ease-in-out_infinite]"
-            ),
-            ref: fillRef,
+            cx: "18",
+            cy: "18",
+            r: "15",
+            fill: "none",
+            strokeWidth: "4",
+            strokeLinecap: "round",
+            pathLength: 100,
+            strokeDasharray: `${isIndeterminate ? 25 : percentage} 100`,
+            className: cn("transition-all duration-spatial-default ease-spatial-default", ringTone[tone]),
             "data-part": "fill",
             "data-indeterminate": isIndeterminate || void 0
           }
         )
+      ] }) });
+    }
+    if (segments && segments > 0 && !isIndeterminate) {
+      const filled = Math.round(percentage / 100 * segments);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          ...aria,
+          className: cn(progressTrackVariants({ size }), "flex gap-1 bg-transparent", className),
+          ...props,
+          children: Array.from({ length: segments }, (_, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-part": "segment",
+              "data-filled": i < filled || void 0,
+              className: cn(
+                "flex-1",
+                i < filled ? progressFillVariants({ tone }) : "rounded-full bg-[var(--color-surface-container-high)]"
+              )
+            },
+            i
+          ))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { ref, ...aria, className: cn(progressTrackVariants({ size }), className), ...props, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          progressFillVariants({ tone }),
+          animated && "animate-pulse",
+          isIndeterminate && "animate-[nx-progress-indeterminate_1.4s_ease-in-out_infinite]"
+        ),
+        ref: fillRef,
+        "data-part": "fill",
+        "data-indeterminate": isIndeterminate || void 0
       }
-    );
+    ) });
   }
 );
 Progress.displayName = "Progress";

package/dist/components/Skeleton/Skeleton.d.ts

@@ -10,5 +10,14 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLSpanElement>, Va
     width?: string | number;
     height?: string | number;
     animated?: boolean;
+    /** Effect when `animated`: `pulse` fades, `shimmer` sweeps a highlight across. Both stop under reduced motion. @default 'pulse' */
+    animation?: 'pulse' | 'shimmer';
 }
 export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLSpanElement>>;
+export interface SkeletonTextProps extends React.HTMLAttributes<HTMLSpanElement>, Pick<SkeletonProps, 'animated' | 'animation'> {
+    /** Number of lines; the last is shorter. @default 3 */
+    lines?: number;
+}
+/** Placeholder paragraph. Each line is one line-height tall (inherited from the
+ *  surrounding text style), so swapping in the real text doesn't shift layout. */
+export declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Skeleton/Skeleton.js

@@ -29,6 +29,7 @@ const Skeleton = React.forwardRef(
     width,
     height,
     animated = true,
+    animation = "pulse",
     style,
     ...props
   }, ref) => {
@@ -40,7 +41,11 @@ const Skeleton = React.forwardRef(
       {
         ref,
         "aria-hidden": "true",
-        className: cn(skeletonVariants({ shape, animated }), className),
+        className: cn(
+          skeletonVariants({ shape, animated: animated && animation === "pulse" }),
+          animated && animation === "shimmer" && "nx-skeleton-shimmer",
+          className
+        ),
         style: sizeStyle || style ? { ...sizeStyle, ...style } : void 0,
         ...props
       }
@@ -48,7 +53,19 @@ const Skeleton = React.forwardRef(
   }
 );
 Skeleton.displayName = "Skeleton";
+const SkeletonText = React.forwardRef(
+  ({ className, lines = 3, animated, animation, ...props }, ref) => /* @__PURE__ */ jsx("span", { ref, "aria-hidden": "true", className: cn("block", className), ...props, children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx("span", { className: "flex h-[1lh] items-center", children: /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      animated,
+      animation,
+      className: i === lines - 1 && lines > 1 ? "w-3/5" : void 0
+    }
+  ) }, i)) })
+);
+SkeletonText.displayName = "SkeletonText";
 export {
   Skeleton,
+  SkeletonText,
   skeletonVariants
 };

package/dist/components/Skeleton/index.d.ts

@@ -1,2 +1,2 @@
-export { Skeleton, skeletonVariants } from './Skeleton.js';
-export type { SkeletonProps } from './Skeleton.js';
+export { Skeleton, SkeletonText, skeletonVariants } from './Skeleton.js';
+export type { SkeletonProps, SkeletonTextProps } from './Skeleton.js';

package/dist/components/Skeleton/index.js

@@ -1,5 +1,6 @@
-import { Skeleton, skeletonVariants } from "./Skeleton.js";
+import { Skeleton, SkeletonText, skeletonVariants } from "./Skeleton.js";
 export {
   Skeleton,
+  SkeletonText,
   skeletonVariants
 };

package/dist/components/Toast/Toaster.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadixToast from "@radix-ui/react-toast";
-import { X } from "@nexub/icons";
+import { AlertTriangle, CheckCircle2, Info, Loader2, X, XCircle } from "@nexub/icons";
 import { cn } from "../../utils/cn.js";
 import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
 import { useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
@@ -12,8 +12,17 @@ const toneMap = {
   error: "border-s-4 border-[var(--color-error)]",
   warning: "border-s-4 border-[var(--color-warning)]",
   info: "border-s-4 border-[var(--color-info)]",
-  neutral: ""
+  neutral: "",
+  loading: ""
 };
+const toneIcon = {
+  success: /* @__PURE__ */ jsx(CheckCircle2, { size: "sm", "aria-hidden": "true", className: "shrink-0 text-[var(--color-success-container)]" }),
+  error: /* @__PURE__ */ jsx(XCircle, { size: "sm", "aria-hidden": "true", className: "shrink-0 text-[var(--color-error-container)]" }),
+  warning: /* @__PURE__ */ jsx(AlertTriangle, { size: "sm", "aria-hidden": "true", className: "shrink-0 text-[var(--color-warning-container)]" }),
+  info: /* @__PURE__ */ jsx(Info, { size: "sm", "aria-hidden": "true", className: "shrink-0 text-[var(--color-info-container)]" }),
+  loading: /* @__PURE__ */ jsx(Loader2, { size: "sm", "aria-hidden": "true", className: "shrink-0 animate-spin motion-reduce:animate-none" })
+};
+const FLICK_VELOCITY = 0.11;
 const GAP = 8;
 const vertical = {
   top: { viewport: "top-0", toast: "top-4 origin-bottom", enter: "[--nx-y:calc(-100%-1rem)]" },
@@ -41,6 +50,8 @@ function Toaster({ expand = false, visibleToasts = 3, position = "top-end" }) {
   const state = React.useRef({ order, expanded, visibleToasts });
   state.current = { order, expanded, visibleToasts };
   const timers = React.useRef(/* @__PURE__ */ new Set());
+  const firstSeen = React.useRef(/* @__PURE__ */ new Map());
+  const swipeStart = React.useRef(0);
   React.useEffect(() => {
     const pending = timers.current;
     return () => pending.forEach(clearTimeout);
@@ -53,12 +64,12 @@ function Toaster({ expand = false, visibleToasts = 3, position = "top-end" }) {
     let front = 0;
     let stack = 0;
     order2.forEach((id, i) => {
-      const el = ol.querySelector(`[data-toast-id="${id}"]`);
-      if (!el) return;
-      if (i === 0 || expanded2 || !heights.current.has(id)) heights.current.set(id, el.offsetHeight);
+      const el2 = ol.querySelector(`[data-toast-id="${id}"]`);
+      if (!el2) return;
+      if (i === 0 || expanded2 || !heights.current.has(id)) heights.current.set(id, el2.offsetHeight);
       const h2 = heights.current.get(id);
-      el.style.setProperty("--nx-toast-index", String(i));
-      el.style.setProperty("--nx-toast-offset", `${offset}px`);
+      el2.style.setProperty("--nx-toast-index", String(i));
+      el2.style.setProperty("--nx-toast-offset", `${offset}px`);
       if (i === 0) front = h2;
       if (i < visibleToasts2) stack = offset + h2;
       offset += h2 + GAP;
@@ -104,30 +115,53 @@ function Toaster({ expand = false, visibleToasts = 3, position = "top-end" }) {
       setFocused(false);
     }
   }, [order.length]);
+  const el = (id) => viewportRef.current?.querySelector(`[data-toast-id="${id}"]`);
+  const close = (t) => {
+    if (closed.has(t.id)) return;
+    fireToastClose(t);
+    setClosed((s) => new Set(s).add(t.id));
+    const timer = setTimeout(() => {
+      timers.current.delete(timer);
+      firstSeen.current.delete(t.id);
+      toast.dismiss(t.id);
+      setClosed((s) => {
+        const next = new Set(s);
+        next.delete(t.id);
+        return next;
+      });
+    }, 1e3);
+    timers.current.add(timer);
+  };
   return /* @__PURE__ */ jsxs(RadixToast.Provider, { swipeDirection: align === "start" === (dir === "rtl") ? "right" : "left", children: [
     toasts.map((t) => {
       const i = order.indexOf(t.id);
       const action = t.action ?? (t.undo && { label: t.undo.label ?? messages.undo, onClick: t.undo.onUndo });
+      if (!firstSeen.current.has(t.id)) firstSeen.current.set(t.id, t);
+      const announce = firstSeen.current.get(t.id) !== t && t.tone !== "loading" ? [t.title, t.description].filter(Boolean).join(". ") : "";
+      const icon = t.icon === false ? null : t.icon ?? toneIcon[t.tone ?? "neutral"];
+      const duration = t.tone === "loading" ? Infinity : t.duration ?? 5e3;
       return /* @__PURE__ */ jsxs(
         RadixToast.Root,
         {
           "data-toast-id": t.id,
           "data-front": i === -1 ? void 0 : i === 0,
           "data-hidden": i === -1 ? void 0 : i >= visibleToasts,
+          open: !closed.has(t.id),
           onOpenChange: (open) => {
-            if (open) return;
-            fireToastClose(t);
-            setClosed((s) => new Set(s).add(t.id));
-            const timer = setTimeout(() => {
-              timers.current.delete(timer);
-              toast.dismiss(t.id);
-              setClosed((s) => {
-                const next = new Set(s);
-                next.delete(t.id);
-                return next;
-              });
-            }, 1e3);
-            timers.current.add(timer);
+            if (!open) close(t);
+          },
+          onPause: () => el(t.id)?.setAttribute("data-paused", ""),
+          onResume: () => el(t.id)?.removeAttribute("data-paused"),
+          onSwipeStart: () => {
+            swipeStart.current = performance.now();
+          },
+          onSwipeCancel: (e) => {
+            const { x, y } = e.detail.delta;
+            if (Math.hypot(x, y) / Math.max(1, performance.now() - swipeStart.current) < FLICK_VELOCITY) return;
+            e.preventDefault();
+            e.currentTarget.setAttribute("data-swipe", "end");
+            e.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${x}px`);
+            close(t);
           },
           className: cn(
             "group pointer-events-auto absolute inset-x-4 flex items-center justify-between gap-3 overflow-hidden rounded-shape-container bg-[var(--color-inverse-surface)] py-3 ps-4 pe-2 text-[var(--color-inverse-on-surface)] shadow-elevation-2",
@@ -152,9 +186,10 @@ function Toaster({ expand = false, visibleToasts = 3, position = "top-end" }) {
             align === "center" ? v.enter : h.enter,
             toneMap[t.tone ?? "neutral"]
           ),
-          duration: t.duration ?? 5e3,
+          duration,
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "grid gap-1", children: [
+            icon,
+            /* @__PURE__ */ jsxs("div", { className: "grid flex-1 gap-1", children: [
               /* @__PURE__ */ jsx(RadixToast.Title, { className: "text-title-sm", children: t.title }),
               t.description && /* @__PURE__ */ jsx(RadixToast.Description, { className: "text-body-sm text-[color-mix(in_srgb,var(--color-inverse-on-surface)_80%,transparent)]", children: t.description })
             ] }),
@@ -170,7 +205,17 @@ function Toaster({ expand = false, visibleToasts = 3, position = "top-end" }) {
             /* @__PURE__ */ jsxs(RadixToast.Close, { className: "nx-state-layer relative grid h-8 w-8 place-items-center rounded-full transition-opacity [@media(hover:hover)]:opacity-0 group-hover:opacity-100 focus-visible:opacity-100", children: [
               /* @__PURE__ */ jsx(X, { size: "sm", "aria-hidden": "true" }),
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: messages.close })
-            ] })
+            ] }),
+            /* @__PURE__ */ jsx("span", { role: "status", className: "sr-only", children: announce }),
+            t.showProgress && duration !== Infinity && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                ref: (bar) => bar?.style.setProperty("animation-duration", `${duration}ms`),
+                className: "absolute inset-x-0 bottom-0 h-0.5 origin-left bg-current opacity-40 rtl:origin-right [animation:nx-scroll-progress_1s_linear_reverse_forwards] group-data-[paused]:[animation-play-state:paused] motion-reduce:hidden"
+              },
+              duration
+            )
           ]
         },
         t.id

package/dist/components/Toast/index.d.ts

@@ -2,4 +2,4 @@ export { Toast } from './Toast.js';
 export { Toaster } from './Toaster.js';
 export type { ToasterProps, ToasterPosition } from './Toaster.js';
 export { toast, useToastStore } from './useToast.js';
-export type { ToastItem, ToastTone, UndoableToastOptions } from './useToast.js';
+export type { ToastItem, ToastTone, UndoableToastOptions, PromiseToastOptions } from './useToast.js';