@assure-one/design-system 1.13.0 → 1.14.0

package/dist/index.d.ts

@@ -2320,12 +2320,20 @@ interface ToastAction {
 }
 /** Options accepted by `toast()` and (partially) by `update()`. */
 interface ToastOptions {
-    title: React.ReactNode;
+    title?: React.ReactNode;
     description?: React.ReactNode;
     variant?: ToastVariant;
     /** Auto-dismiss after N ms. `0` = sticky. `loading` defaults to sticky. */
     duration?: number;
     action?: ToastAction;
+    /**
+     * Rich-variant escape hatch. When provided, the toast renders `content`
+     * inside its surface instead of the title/chip/countdown layout — the
+     * content owns its own structure and dismissal. Pass a render function to
+     * receive `close` (e.g. a review queue that dismisses itself once empty).
+     * Rich-content toasts are sticky by default (no auto-dismiss countdown).
+     */
+    content?: React.ReactNode | ((close: () => void) => React.ReactNode);
     /**
      * When set, a new toast with the same key updates the existing one in place
      * instead of stacking a duplicate (e.g. repeated "Saving…" feedback).

package/dist/index.js

@@ -9493,19 +9493,17 @@ function ToastProvider({ children }) {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   const addToast = useCallback((options) => {
-    const variant = options.variant ?? "default";
-    const duration = options.duration ?? (variant === "loading" ? 0 : DEFAULT_DURATION);
     const id = `toast-${++toastCount}`;
     setToasts((prev) => {
       if (options.dedupeKey) {
         const existing = prev.find((t) => t.dedupeKey === options.dedupeKey);
         if (existing) {
           return prev.map(
-            (t) => t.dedupeKey === options.dedupeKey ? { ...t, ...options, variant, duration, seq: t.seq + 1 } : t
+            (t) => t.dedupeKey === options.dedupeKey ? { ...t, ...options, seq: t.seq + 1 } : t
           );
         }
       }
-      return [...prev, { id, seq: 0, ...options, variant, duration }];
+      return [...prev, { id, seq: 0, ...options }];
     });
     return id;
   }, []);
@@ -9513,9 +9511,8 @@ function ToastProvider({ children }) {
     setToasts(
       (prev) => prev.map((t) => {
         if (t.id !== id) return t;
-        const variant = patch.variant ?? t.variant;
         const duration = patch.duration ?? (patch.variant && patch.variant !== "loading" ? DEFAULT_DURATION : t.duration);
-        return { ...t, ...patch, variant, duration, seq: t.seq + 1 };
+        return { ...t, ...patch, duration, seq: t.seq + 1 };
       })
     );
   }, []);
@@ -9556,79 +9553,89 @@ function ToastProvider({ children }) {
   ] });
 }
 var variantConfig = {
-  default: { chip: "bg-pro-bg", icon: "text-pro-fg", bar: "bg-pro-fg", Icon: InfoCircleSolidIcon },
+  default: {
+    chip: "bg-pro-bg",
+    icon: "text-pro-fg",
+    stroke: "stroke-pro-fg",
+    ring: "ring-pro-fg/15",
+    Icon: InfoCircleSolidIcon
+  },
   success: {
     chip: "bg-success-bg",
     icon: "text-success-fg",
-    bar: "bg-success-fg",
+    stroke: "stroke-success-fg",
+    ring: "ring-success-fg/15",
     Icon: CheckCircleSolidIcon
   },
   destructive: {
     chip: "bg-danger-bg",
     icon: "text-danger-fg",
-    bar: "bg-danger-fg",
+    stroke: "stroke-danger-fg",
+    ring: "ring-danger-fg/15",
     Icon: XCircleSolidIcon
   },
   warning: {
     chip: "bg-warning-bg",
     icon: "text-warning-fg",
-    bar: "bg-warning-fg",
+    stroke: "stroke-warning-fg",
+    ring: "ring-warning-fg/20",
     Icon: AlertTriangleSolidIcon
   },
   info: {
     chip: "bg-info/12",
     icon: "text-info",
-    bar: "bg-info",
+    stroke: "stroke-info",
+    ring: "ring-info/15",
     Icon: InfoCircleSolidIcon
   },
   loading: {
     chip: "bg-pro-bg",
     icon: "text-pro-fg",
-    bar: "bg-pro-fg",
+    stroke: "stroke-pro-fg",
+    ring: "ring-pro-fg/15",
     Icon: LoaderIcon,
     spin: true
   }
 };
+var RING_RADIUS2 = 11;
+var RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS2;
 var SWIPE_DISMISS_PX = 72;
 function ToastItem({ toast, onDismiss }) {
-  const [exiting, setExiting] = useState(false);
+  const timerRef = useRef(void 0);
+  const remainingRef = useRef(toast.duration ?? DEFAULT_DURATION);
+  const startedAtRef = useRef(0);
   const cardRef = useRef(null);
-  const barRef = useRef(null);
-  const pausedRef = useRef(false);
-  const duration = toast.duration;
-  const showProgress = duration > 0;
+  const [exiting, setExiting] = useState(false);
+  const [paused, setPaused] = useState(false);
+  const hasContent = toast.content != null;
+  const duration = toast.duration ?? DEFAULT_DURATION;
+  const isLoading = (toast.variant ?? "default") === "loading";
+  const autoDismiss = duration > 0 && !hasContent && !isLoading;
+  const isError = (toast.variant ?? "default") === "destructive";
   const close = useCallback(() => {
     setExiting(true);
     setTimeout(() => onDismiss(toast.id), 150);
   }, [toast.id, onDismiss]);
   useEffect(() => {
-    if (!showProgress) return;
-    let raf = 0;
-    let remaining = duration;
-    let last = performance.now();
-    const tick = (now) => {
-      const dt = now - last;
-      last = now;
-      if (!pausedRef.current) {
-        remaining -= dt;
-        if (barRef.current) {
-          barRef.current.style.width = `${Math.max(0, Math.min(100, (duration - remaining) / duration * 100))}%`;
-        }
-        if (remaining <= 0) {
-          close();
-          return;
-        }
-      }
-      raf = requestAnimationFrame(tick);
+    remainingRef.current = toast.duration ?? DEFAULT_DURATION;
+  }, [toast.seq, toast.duration]);
+  useEffect(() => {
+    if (!autoDismiss || exiting || paused) return;
+    startedAtRef.current = Date.now();
+    timerRef.current = setTimeout(close, remainingRef.current);
+    return () => {
+      clearTimeout(timerRef.current);
+      remainingRef.current = Math.max(
+        0,
+        remainingRef.current - (Date.now() - startedAtRef.current)
+      );
     };
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, [duration, showProgress, close, toast.seq]);
+  }, [autoDismiss, exiting, paused, close, toast.seq]);
   const dragRef = useRef(null);
   const onPointerDown = (e) => {
-    if (e.target.closest("button")) return;
+    if (e.target.closest("button, a, input, textarea")) return;
     dragRef.current = { startX: e.clientX, dx: 0 };
-    pausedRef.current = true;
+    setPaused(true);
     cardRef.current?.setPointerCapture(e.pointerId);
   };
   const onPointerMove = (e) => {
@@ -9649,101 +9656,151 @@ function ToastItem({ toast, onDismiss }) {
     }
     cardRef.current.style.transform = "";
     cardRef.current.style.opacity = "";
-    pausedRef.current = false;
+    setPaused(false);
   };
-  const { chip, icon, bar, Icon: Icon3, spin } = variantConfig[toast.variant];
-  return (
-    // Pointer/hover handlers add pause-on-hover + swipe-to-dismiss as progressive
-    // enhancement only — keyboard/AT users dismiss via the explicit Dismiss
-    // button below, and the live region (role=status) still announces content.
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: cardRef,
-        role: "status",
-        "data-state": exiting ? "closed" : "open",
-        onPointerDown,
-        onPointerMove,
-        onPointerUp: endDrag,
-        onPointerCancel: endDrag,
-        onMouseEnter: () => {
-          pausedRef.current = true;
-        },
-        onMouseLeave: () => {
-          if (!dragRef.current) pausedRef.current = false;
-        },
-        onFocusCapture: () => {
-          pausedRef.current = true;
-        },
-        onBlurCapture: () => {
-          if (!dragRef.current) pausedRef.current = false;
-        },
-        className: cn(
-          "bg-surface border-rule text-fg rounded-card shadow-card pointer-events-auto relative w-80 touch-none overflow-hidden border p-4",
-          "font-body select-none",
-          // Unified data-state animation (spec §5.27) — same model as Dialog/Tooltip:
-          //   open  → fade+slide in over --duration-overlay (200ms), ease-out-quart
-          //   close → fade+slide out over --duration-fast    (150ms), ease-in
-          "data-[state=open]:animate-in data-[state=open]:slide-in-from-right-8 data-[state=open]:fade-in-0",
-          "data-[state=open]:duration-[var(--duration-overlay)] data-[state=open]:ease-[var(--ease-out-quart)]",
-          "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right-8 data-[state=closed]:fade-out-0",
-          "data-[state=closed]:duration-[var(--duration-fast)] data-[state=closed]:ease-[var(--ease-in)]",
-          "motion-reduce:animate-none"
+  const { chip, icon, stroke, ring, Icon: Icon3, spin } = variantConfig[toast.variant ?? "default"];
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: cardRef,
+      role: hasContent ? "group" : isError ? "alert" : "status",
+      "aria-atomic": hasContent ? void 0 : true,
+      "data-state": exiting ? "closed" : "open",
+      onPointerEnter: () => setPaused(true),
+      onPointerLeave: () => {
+        if (!dragRef.current) setPaused(false);
+      },
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+      onFocusCapture: () => setPaused(true),
+      onBlurCapture: () => {
+        if (!dragRef.current) setPaused(false);
+      },
+      className: cn(
+        "bg-surface border-rule text-fg rounded-card shadow-card pointer-events-auto relative w-80 max-w-[calc(100vw-2rem)] touch-none overflow-hidden border",
+        // Title-mode padding; rich content owns its own internal padding.
+        hasContent ? "" : "p-4",
+        "font-body select-none",
+        // Tactile lift on hover/focus — signals the card is interactive and
+        // that its countdown is held. Shadow only (not motion), so it needs no
+        // reduced-motion fallback; the named property keeps us off transition-all.
+        "transition-shadow duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+        "hover:shadow-lg focus-within:shadow-lg motion-reduce:transition-none",
+        // Unified data-state animation (spec §5.27) — same model as Dialog/Tooltip,
+        // with a subtle zoom so the toast *pops* in rather than just appearing:
+        //   open  → fade + slide-from-right + zoom-from-95 over --duration-normal (250ms), ease-out-quart
+        //   close → fade + slide-to-right   + zoom-to-95   over --duration-fast   (150ms), ease-in
+        "data-[state=open]:animate-in data-[state=open]:slide-in-from-right-8 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "data-[state=open]:duration-[var(--duration-normal)] data-[state=open]:ease-[var(--ease-out-quart)]",
+        "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-right-8 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "data-[state=closed]:duration-[var(--duration-fast)] data-[state=closed]:ease-[var(--ease-in)]",
+        "motion-reduce:animate-none"
+      ),
+      children: hasContent ? typeof toast.content === "function" ? toast.content(close) : toast.content : /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              // Same-hue inset ring gives the tinted chip a crafted edge instead
+              // of a flat fill — definition without a heavy border.
+              "inline-flex size-8 shrink-0 items-center justify-center rounded-[9px] ring-1 ring-inset",
+              // Staggered pop — chip scales in ~80ms after the card lands so the
+              // status glyph "arrives". motion-safe only; reduced motion shows it
+              // at rest with no entrance.
+              "motion-safe:animate-[toast-chip-in_280ms_var(--ease-out-quart)_80ms_both]",
+              chip,
+              icon,
+              ring
+            ),
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(Icon3, { className: cn("size-5", spin && "animate-spin motion-reduce:animate-none") })
+          }
         ),
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: cn(
-                  "inline-flex size-8 shrink-0 items-center justify-center rounded-[9px]",
-                  chip,
-                  icon
-                ),
-                "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx(Icon3, { className: cn("size-5", spin && "animate-spin motion-reduce:animate-none") })
-              }
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          toast.title && /* @__PURE__ */ jsx("p", { className: "text-fg text-sm leading-tight font-semibold", children: toast.title }),
+          toast.description && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-0.5 text-sm leading-snug", children: toast.description }),
+          toast.action && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                toast.action?.onClick();
+                close();
+              },
+              className: cn(
+                "text-pro-fg mt-2 text-sm font-semibold",
+                "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] hover:underline motion-reduce:transition-none",
+                "focus-visible:[box-shadow:var(--shadow-focus-ring)] rounded-sm focus-visible:outline-none"
+              ),
+              children: toast.action.label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: close,
+            className: cn(
+              // size-7 click target with a -m-1 offset so the glyph keeps its
+              // top-right optical position while the hit area (and ring) grow.
+              "text-fg-4 hover:text-fg-2 hover:bg-overlay-hover relative -mt-1 -mr-1 inline-flex size-7 shrink-0 items-center justify-center rounded-full",
+              "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+              "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
             ),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-fg text-sm leading-tight font-semibold", children: toast.title }),
-              toast.description && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-0.5 text-sm leading-snug", children: toast.description }),
-              toast.action && /* @__PURE__ */ jsx(
-                "button",
+            "aria-label": "Dismiss",
+            children: [
+              autoDismiss && // Countdown drains as a ring hugging the dismiss button — the timer
+              // and the close affordance share one spot. Pauses in lockstep with
+              // the JS timer (animation-play-state). Hidden under reduced motion;
+              // the timer still governs dismissal.
+              /* @__PURE__ */ jsxs(
+                "svg",
                 {
-                  type: "button",
-                  onClick: () => {
-                    toast.action?.onClick();
-                    close();
-                  },
-                  className: cn(
-                    "text-pro-fg mt-2 text-sm font-semibold",
-                    "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] hover:underline motion-reduce:transition-none",
-                    "focus-visible:[box-shadow:var(--shadow-focus-ring)] rounded-sm focus-visible:outline-none"
-                  ),
-                  children: toast.action.label
+                  viewBox: "0 0 28 28",
+                  className: "pointer-events-none absolute inset-0 size-7 -rotate-90 motion-reduce:hidden",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: "14",
+                        cy: "14",
+                        r: RING_RADIUS2,
+                        fill: "none",
+                        strokeWidth: "2",
+                        className: "stroke-rule"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: "14",
+                        cy: "14",
+                        r: RING_RADIUS2,
+                        fill: "none",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        className: cn("opacity-90", stroke),
+                        style: {
+                          strokeDasharray: RING_CIRCUMFERENCE,
+                          "--toast-ring-circ": RING_CIRCUMFERENCE,
+                          animation: `toast-ring-drain ${duration}ms linear forwards`,
+                          animationPlayState: paused ? "paused" : "running"
+                        }
+                      }
+                    )
+                  ]
                 }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: close,
-                className: cn(
-                  "text-fg-4 hover:text-fg-2 rounded-icon -mr-1 inline-flex size-5 shrink-0 items-center justify-center",
-                  "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-                  "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
-                ),
-                "aria-label": "Dismiss",
-                children: /* @__PURE__ */ jsx(XIcon, { className: "size-3.5", "aria-hidden": "true" })
-              }
-            )
-          ] }),
-          showProgress && /* @__PURE__ */ jsx("div", { className: "bg-rule absolute inset-x-0 bottom-0 h-1", "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { ref: barRef, className: cn("h-full", bar), style: { width: "0%" } }) })
-        ]
-      }
-    )
+              ),
+              /* @__PURE__ */ jsx(XIcon, { className: "relative size-3.5", "aria-hidden": "true" })
+            ]
+          }
+        )
+      ] }) })
+    }
   );
 }
 var itemVariants = cva(