@nexub/react 7.3.0 → 7.5.0

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';

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

@@ -1,10 +1,16 @@
-export type ToastTone = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+import { type ReactNode } from 'react';
+/** `loading` shows a spinner and never auto-dismisses; update it (or use `toast.promise`) to settle it. */
+export type ToastTone = 'success' | 'error' | 'warning' | 'info' | 'neutral' | 'loading';
 export interface ToastItem {
     id: string;
     title: string;
     description?: string;
     tone?: ToastTone;
     duration?: number;
+    /** Leading icon. Defaults to the tone's icon (none for neutral); `false` hides it. */
+    icon?: ReactNode | false;
+    /** A thin bar counting down the time left before auto-dismiss; pauses with the timer. */
+    showProgress?: boolean;
     action?: {
         label: string;
         onClick: () => void;
@@ -31,6 +37,15 @@ export declare function useToastStore(): ToastItem[];
 /** Runs a toast's onClose at most once. Internal: the Toaster calls it when Radix closes a toast. */
 export declare function fireToastClose(item: ToastItem): void;
 declare function dismiss(id?: string): void;
+/** Changes an open toast in place (same element; a settled tone is announced once). No-op if it's gone. */
+declare function update(id: string, patch: Partial<Omit<ToastItem, 'id'>>): void;
+export interface PromiseToastOptions<T> {
+    loading: string;
+    success: string | ((value: T) => string);
+    error: string | ((error: unknown) => string);
+}
+/** Shows a loading toast, then turns that same toast into success or error. Returns `promise` as is. */
+declare function promise<T>(promise: Promise<T>, { loading, success, error }: PromiseToastOptions<T>): Promise<T>;
 declare function undoable(title: string, { onUndo, onCommit, undoLabel, description, duration }: UndoableToastOptions): string;
 export declare const toast: {
     success: (title: string, opts?: Partial<Omit<ToastItem, "id" | "title" | "tone">>) => string;
@@ -40,6 +55,8 @@ export declare const toast: {
     custom: (title: string, opts?: Partial<Omit<ToastItem, "id" | "title" | "tone">>) => string;
     /** A toast with an Undo action: Undo calls `onUndo`; any other close calls `onCommit`, once. */
     undoable: typeof undoable;
+    update: typeof update;
+    promise: typeof promise;
     dismiss: typeof dismiss;
 };
 export {};

package/dist/components/Toast/useToast.js

@@ -41,6 +41,18 @@ function dismiss(id) {
     closeFired.delete(item.id);
   }
 }
+function update(id, patch) {
+  g.__nexub_toast_items = g.__nexub_toast_items.map((i) => i.id === id ? { ...i, ...patch } : i);
+  notify();
+}
+function promise(promise2, { loading, success, error }) {
+  const id = add({ title: loading, tone: "loading" });
+  promise2.then(
+    (v) => update(id, { title: typeof success === "function" ? success(v) : success, tone: "success" }),
+    (e) => update(id, { title: typeof error === "function" ? error(e) : error, tone: "error" })
+  );
+  return promise2;
+}
 function undoable(title, { onUndo, onCommit, undoLabel, description, duration }) {
   let undone = false;
   return add({
@@ -65,6 +77,8 @@ const toast = {
   custom: (title, opts) => add({ title, tone: "neutral", ...opts }),
   /** A toast with an Undo action: Undo calls `onUndo`; any other close calls `onCommit`, once. */
   undoable,
+  update,
+  promise,
   dismiss
 };
 export {

package/dist/hooks/useAsyncAction.d.ts

@@ -0,0 +1,27 @@
+export interface AsyncAction<A extends unknown[], R> {
+    /** Calls `fn`. Resolves to its result, or `undefined` if it threw or a newer call (or `reset`) superseded it. Never rejects. */
+    run: (...args: A) => Promise<R | undefined>;
+    /** True while the latest call is in flight. */
+    pending: boolean;
+    /** What the latest call threw; cleared by the next `run` or `reset`. */
+    error: unknown;
+    /** Clears `pending` and `error` and ignores any call still in flight. */
+    reset: () => void;
+}
+/**
+ * Wraps an async function with pending/error state. The latest call wins:
+ * results and errors from older calls are dropped, and so is anything that
+ * settles after unmount.
+ *
+ * ```tsx
+ * const save = useAsyncAction(async (draft: Draft) => api.save(draft));
+ * <Button loading={save.pending} onClick={() => save.run(draft)}>Save</Button>
+ * {save.error ? <Alert tone="danger">Could not save</Alert> : null}
+ * ```
+ *
+ * For optimistic UI, pair it with React 19 `useOptimistic`: apply the
+ * optimistic value inside `startTransition`, then `await run(...)`; React
+ * drops the optimistic value when the transition ends. Inside a
+ * `<form action>`, a `type="submit"` Button already tracks pending on its own.
+ */
+export declare function useAsyncAction<A extends unknown[], R>(fn: (...args: A) => Promise<R> | R): AsyncAction<A, R>;

package/dist/hooks/useAsyncAction.js

@@ -0,0 +1,36 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+function useAsyncAction(fn) {
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState(void 0);
+  const latest = useRef(0);
+  const fnRef = useRef(fn);
+  useIsomorphicLayoutEffect(() => {
+    fnRef.current = fn;
+  });
+  useEffect(() => () => void latest.current++, []);
+  const run = useCallback(async (...args) => {
+    const id = ++latest.current;
+    setPending(true);
+    setError(void 0);
+    try {
+      const result = await fnRef.current(...args);
+      return id === latest.current ? result : void 0;
+    } catch (e) {
+      if (id === latest.current) setError(e);
+      return void 0;
+    } finally {
+      if (id === latest.current) setPending(false);
+    }
+  }, []);
+  const reset = useCallback(() => {
+    latest.current++;
+    setPending(false);
+    setError(void 0);
+  }, []);
+  return { run, pending, error, reset };
+}
+export {
+  useAsyncAction
+};

package/dist/index.d.ts

@@ -11,6 +11,8 @@ export { useMediaQuery } from './hooks/useMediaQuery.js';
 export { useMergedRefs } from './hooks/useMergedRefs.js';
 export { useUnsavedChanges } from './hooks/useUnsavedChanges.js';
 export { usePointerSheen } from './hooks/usePointerSheen.js';
+export { useAsyncAction } from './hooks/useAsyncAction.js';
+export type { AsyncAction } from './hooks/useAsyncAction.js';
 export { PromptInput } from './components/PromptInput/index.js';
 export type { PromptInputProps, PromptInputMessages, PromptInputStatus } from './components/PromptInput/index.js';
 export { ThinkingIndicator } from './components/ThinkingIndicator/index.js';
@@ -84,7 +86,7 @@ export type { ChipProps } from './components/Chip/index.js';
 export { EyebrowChip } from './components/EyebrowChip/index.js';
 export type { EyebrowChipProps } from './components/EyebrowChip/index.js';
 export { Avatar, avatarVariants } from './components/Avatar/index.js';
-export type { AvatarProps } from './components/Avatar/index.js';
+export type { AvatarProps, AvatarStatus } from './components/Avatar/index.js';
 export { AvatarGroup, avatarGroupVariants } from './components/AvatarGroup/index.js';
 export type { AvatarGroupProps } from './components/AvatarGroup/index.js';
 export { Card, CardLink, cardVariants } from './components/Card/index.js';
@@ -97,8 +99,8 @@ export { MediaCard } from './components/MediaCard/index.js';
 export type { MediaCardProps, MediaCardRatio } from './components/MediaCard/index.js';
 export { Alert, alertVariants } from './components/Alert/index.js';
 export type { AlertProps } from './components/Alert/index.js';
-export { Skeleton, skeletonVariants } from './components/Skeleton/index.js';
-export type { SkeletonProps } from './components/Skeleton/index.js';
+export { Skeleton, SkeletonText, skeletonVariants } from './components/Skeleton/index.js';
+export type { SkeletonProps, SkeletonTextProps } from './components/Skeleton/index.js';
 export { Spinner, spinnerVariants } from './components/Spinner/index.js';
 export type { SpinnerProps } from './components/Spinner/index.js';
 export { Progress, progressTrackVariants, progressFillVariants } from './components/Progress/index.js';
@@ -178,7 +180,7 @@ export { Checkbox } from './components/Checkbox/index.js';
 export type { CheckboxProps } from './components/Checkbox/index.js';
 export { RadioGroup } from './components/RadioGroup/index.js';
 export { Slider } from './components/Slider/index.js';
-export type { SliderProps } from './components/Slider/index.js';
+export type { SliderProps, SliderMark } from './components/Slider/index.js';
 export { Toggle, toggleVariants } from './components/Toggle/index.js';
 export type { ToggleProps } from './components/Toggle/index.js';
 export { ToggleGroup } from './components/ToggleGroup/index.js';
@@ -256,3 +258,4 @@ export { Fade, Slide, Scale, Collapse, ListTransition, SkeletonSwap, usePrefersR
 export type { FadeProps, SlideProps, SlideDirection, ScaleProps, CollapseProps, ListTransitionProps, SkeletonSwapProps, MotionDuration, MotionEasing, MotionBaseProps, RevealProps, FloatProps, MarqueeProps } from './components/Motion/index.js';
 export type { DataTableColumn } from './components/DataTable/index.js';
 export type { TableRootProps } from './components/Table/index.js';
+export type { PromiseToastOptions } from './components/Toast/index.js';

package/dist/index.js

@@ -9,6 +9,7 @@ import { useMediaQuery } from "./hooks/useMediaQuery.js";
 import { useMergedRefs } from "./hooks/useMergedRefs.js";
 import { useUnsavedChanges } from "./hooks/useUnsavedChanges.js";
 import { usePointerSheen } from "./hooks/usePointerSheen.js";
+import { useAsyncAction } from "./hooks/useAsyncAction.js";
 import { PromptInput } from "./components/PromptInput/index.js";
 import { ThinkingIndicator } from "./components/ThinkingIndicator/index.js";
 import { StreamingText } from "./components/StreamingText/index.js";
@@ -52,7 +53,7 @@ import { RadioCardGroup, RadioCard } from "./components/RadioCard/index.js";
 import { CheckboxCard } from "./components/CheckboxCard/index.js";
 import { MediaCard } from "./components/MediaCard/index.js";
 import { Alert, alertVariants } from "./components/Alert/index.js";
-import { Skeleton, skeletonVariants } from "./components/Skeleton/index.js";
+import { Skeleton, SkeletonText, skeletonVariants } from "./components/Skeleton/index.js";
 import { Spinner, spinnerVariants } from "./components/Spinner/index.js";
 import { Progress, progressTrackVariants, progressFillVariants } from "./components/Progress/index.js";
 import { Separator, separatorVariants } from "./components/Separator/index.js";
@@ -266,6 +267,7 @@ export {
   Sidebar,
   Skeleton,
   SkeletonSwap,
+  SkeletonText,
   Slide,
   Slider,
   Sortable,
@@ -342,6 +344,7 @@ export {
   todayIn,
   toggleVariants,
   transitionName,
+  useAsyncAction,
   useControllableState,
   useDisclosure,
   useForm,