@nexub/react 7.3.0 → 7.4.0

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