@mihcm/ui 0.15.0 → 0.16.0

package/src/Toast.tsx

@@ -3,42 +3,250 @@
 /**
  * Toast (web variant — React DOM).
  *
+ * Built on top of [sonner](https://sonner.emilkowal.ski/) so MiHCM apps get
+ * every feature the upstream library ships — promise toasts, loading state,
+ * action + cancel buttons, swipe-to-dismiss, hover-to-expand stacks, rich
+ * colours per type, theme switching, full a11y wiring — without forking.
+ *
+ * Surface is themed with MiHCM tokens (`bg-card`, `border-border`,
+ * `text-foreground`, `text-success-foreground`, etc.) via sonner's
+ * `toastOptions.classNames` so the toasts read as part of the rest of the
+ * design system regardless of light/dark mode or custom `colorScheme`s.
+ *
  * Two-part API:
- *  1. `<ToastProvider>` wraps your app, manages the queue, renders toasts
- *     in a fixed container at bottom-right.
- *  2. `toast()` imperative function — call from anywhere to show a toast.
+ *  1. `<Toaster />` — mount once near the app root. It renders the queue
+ *     in a portal at the chosen `position`. Pass `richColors`, `expand`,
+ *     `closeButton`, `visibleToasts`, `theme`, etc. to tune behaviour.
+ *  2. `toast()` — call from anywhere to enqueue. Sub-APIs:
  *
- * Sub-components (`Toast`, `ToastTitle`, `ToastDescription`, `ToastAction`,
- * `ToastClose`) are used internally by the provider but exported for
- * advanced composition.
+ *       toast('Title')
+ *       toast.success('Saved')
+ *       toast.error('Failed', { description: '...' })
+ *       toast.warning('Heads up')
+ *       toast.info('Just so you know')
+ *       toast.message('Plain')
+ *       toast.loading('Working…')
+ *       toast.promise(myPromise, {
+ *         loading: 'Saving…',
+ *         success: (data) => `Saved ${data.name}`,
+ *         error: (err) => `Failed: ${err.message}`,
+ *       })
+ *       toast.custom((id) => <MyJSX onDismiss={() => toast.dismiss(id)} />)
+ *       toast.dismiss()       // dismiss all
+ *       toast.dismiss(id)     // dismiss one
  *
- * Variants: default, success, error, warning.
- * Auto-dismiss after configurable duration (default 5 000 ms).
- * Pause timer on hover; resume on mouse leave.
+ * Backward-compat shims for the previous imperative MiHCM API are below —
+ * `ToastProvider` is a deprecated alias for `Toaster`; the legacy
+ * `Toast`/`ToastTitle`/`ToastDescription`/`ToastAction`/`ToastClose`
+ * sub-components remain so any pre-sonner consumer keeps rendering.
  *
  * Wiki: docs/components/Toast.md
  */
 import {
   forwardRef,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-  useSyncExternalStore,
   type ButtonHTMLAttributes,
+  type ComponentProps,
   type HTMLAttributes,
-  type ReactNode,
 } from 'react';
+import { Toaster as SonnerToaster, toast as sonnerToast } from 'sonner';
 import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from './internal/cn.js';
 
 /* -------------------------------------------------------------------------- */
-/*  CVA variants                                                              */
+/*  Re-exports — the canonical sonner API                                     */
+/* -------------------------------------------------------------------------- */
+
+/**
+ * Imperative toast API. Backed by sonner.
+ *
+ * @example
+ *   toast('Saved');
+ *   toast.success('Profile updated');
+ *   toast.error('Network error', { description: 'Retrying in 5s…' });
+ *   toast.loading('Compiling…');
+ *   toast.promise(savePost(), {
+ *     loading: 'Saving…',
+ *     success: 'Saved!',
+ *     error: 'Save failed',
+ *   });
+ *   toast.dismiss(id);
+ */
+export const toast: typeof sonnerToast = sonnerToast;
+
+export type { ExternalToast, ToastT, ToasterProps } from 'sonner';
+
+/* -------------------------------------------------------------------------- */
+/*  Toaster — themed wrapper around sonner's <Toaster />                       */
+/* -------------------------------------------------------------------------- */
+
+export interface MihcmToasterProps extends ComponentProps<typeof SonnerToaster> {
+  /** Default visual treatment for toasts without an explicit appearance. */
+  appearance?: 'soft' | 'solid' | 'outline' | 'minimal';
+}
+
+/**
+ * Mount `<Toaster />` once near the root of your app (e.g. in `layout.tsx`).
+ * Forwards every prop to sonner's `<Toaster />`; the only addition is the
+ * MiHCM token styling applied via `toastOptions.classNames`.
+ *
+ * @example
+ *   // app/layout.tsx
+ *   import { Toaster } from '@mihcm/ui/Toast';
+ *   <Toaster richColors closeButton position="bottom-right" />
+ */
+export function Toaster({
+  position = 'bottom-right',
+  expand = false,
+  richColors = false,
+  closeButton = false,
+  visibleToasts = 3,
+  duration = 5000,
+  theme = 'system',
+  toastOptions,
+  className,
+  appearance,
+  ...rest
+}: MihcmToasterProps) {
+  void appearance; /* reserved — sonner already handles visual variants via richColors */
+
+  /*
+   * Sonner injects its own CSS that uses these variables to colour each
+   * row. By mapping them to MiHCM design-system tokens here, the surface,
+   * border, and type tints inherit the brand palette AND light/dark mode
+   * flips automatically — no need to fight specificity with Tailwind.
+   */
+  const sonnerCssVars = {
+    '--normal-bg': 'var(--color-card)',
+    '--normal-text': 'var(--color-card-foreground)',
+    '--normal-border': 'var(--color-border)',
+    '--success-bg': 'var(--color-success-50, color-mix(in oklab, var(--color-success) 12%, var(--color-card)))',
+    '--success-text': 'var(--color-success-700, var(--color-success))',
+    '--success-border': 'var(--color-success)',
+    '--error-bg': 'var(--color-destructive-50, color-mix(in oklab, var(--color-destructive) 12%, var(--color-card)))',
+    '--error-text': 'var(--color-destructive-700, var(--color-destructive))',
+    '--error-border': 'var(--color-destructive)',
+    '--warning-bg': 'var(--color-warning-50, color-mix(in oklab, var(--color-warning) 12%, var(--color-card)))',
+    '--warning-text': 'var(--color-warning-700, var(--color-warning))',
+    '--warning-border': 'var(--color-warning)',
+    '--info-bg': 'var(--color-primary-50, color-mix(in oklab, var(--color-primary) 12%, var(--color-card)))',
+    '--info-text': 'var(--color-primary-700, var(--color-primary))',
+    '--info-border': 'var(--color-primary)',
+  } as React.CSSProperties;
+
+  return (
+    <SonnerToaster
+      position={position}
+      expand={expand}
+      richColors={richColors}
+      closeButton={closeButton}
+      visibleToasts={visibleToasts}
+      duration={duration}
+      theme={theme}
+      className={cn('mihcm-toaster', className)}
+      style={{ ...sonnerCssVars, ...(rest.style ?? {}) }}
+      toastOptions={{
+        ...toastOptions,
+        classNames: {
+          /*
+           * Surface — the toast row itself. Polished default look:
+           *   - bg-card / text-card-foreground (theme-aware)
+           *   - shadow-mi-modal for a soft floating elevation
+           *   - rounded-xl + slightly bigger padding for a modern feel
+           *   - ring-1 ring-border for crisp edge separation in light mode
+           *     (the border-border on its own can look washed out)
+           *   - max-width capped so long messages don't sprawl
+           */
+          toast: cn(
+            'group toast pointer-events-auto flex w-full items-start gap-3 rounded-xl border border-border bg-card p-4 pr-12',
+            'text-card-foreground shadow-mi-modal ring-1 ring-border/40',
+            toastOptions?.classNames?.toast,
+          ),
+          title: cn('text-sm font-semibold leading-snug text-foreground', toastOptions?.classNames?.title),
+          description: cn(
+            'text-sm text-muted-foreground leading-snug',
+            toastOptions?.classNames?.description,
+          ),
+          actionButton: cn(
+            'inline-flex shrink-0 items-center rounded-md bg-primary px-3 py-1 text-xs font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            toastOptions?.classNames?.actionButton,
+          ),
+          cancelButton: cn(
+            'inline-flex shrink-0 items-center rounded-md border border-border bg-transparent px-3 py-1 text-xs font-medium text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            toastOptions?.classNames?.cancelButton,
+          ),
+          closeButton: cn(
+            'absolute right-2 top-2 grid size-6 place-items-center rounded-md border border-transparent bg-transparent text-foreground/60 transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            toastOptions?.classNames?.closeButton,
+          ),
+          icon: cn(
+            'mt-0.5 shrink-0 [&_svg]:size-5',
+            toastOptions?.classNames?.icon,
+          ),
+          /*
+           * Per-type styling — sonner adds `data-type="success|error|…"`
+           * to the toast root. Use richColors-like surface treatment so
+           * tone is unmistakeable even without sonner's own richColors
+           * (which forces hard-coded colours).
+           */
+          default: cn('border-border bg-card text-card-foreground', toastOptions?.classNames?.default),
+          success: cn(
+            'border-success/30 bg-success/10 text-foreground [&_[data-icon]]:text-success',
+            toastOptions?.classNames?.success,
+          ),
+          error: cn(
+            'border-destructive/30 bg-destructive/10 text-foreground [&_[data-icon]]:text-destructive',
+            toastOptions?.classNames?.error,
+          ),
+          warning: cn(
+            'border-warning/30 bg-warning/10 text-foreground [&_[data-icon]]:text-warning',
+            toastOptions?.classNames?.warning,
+          ),
+          info: cn(
+            'border-primary/30 bg-primary/10 text-foreground [&_[data-icon]]:text-primary',
+            toastOptions?.classNames?.info,
+          ),
+          loading: cn(
+            'border-border bg-card text-foreground',
+            toastOptions?.classNames?.loading,
+          ),
+        },
+      }}
+      {...rest}
+    />
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Backward-compat layer                                                     */
+/*                                                                            */
+/*  The previous MiHCM Toast API exported `ToastProvider`, `Toast`,           */
+/*  `ToastTitle`, `ToastDescription`, `ToastAction`, `ToastClose`. Keep them  */
+/*  as thin shims so existing call sites stay green. New code should import   */
+/*  `Toaster` + `toast` only.                                                 */
 /* -------------------------------------------------------------------------- */
 
+/**
+ * @deprecated Use `<Toaster />` instead. Kept as a wrapping component for
+ * pre-sonner consumers — renders children, then mounts the Toaster portal.
+ */
+export function ToastProvider({
+  children,
+  ...rest
+}: MihcmToasterProps & { children?: React.ReactNode }) {
+  return (
+    <>
+      {children}
+      <Toaster {...rest} />
+    </>
+  );
+}
+
+export type ToastProviderProps = MihcmToasterProps & { children?: React.ReactNode };
+
+/* The original `toastVariants` CVA — kept for any consumer that referenced
+ * its variant union types or used it to style a stand-alone Toast row.    */
 export const toastVariants = cva(
-  'pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-lg border p-4 shadow-lg ' +
-    'transition-all duration-300 ease-out',
+  'pointer-events-auto relative flex w-full items-start gap-3 overflow-hidden rounded-lg border p-4 shadow-lg transition-all duration-300 ease-out',
   {
     variants: {
       variant: {
@@ -71,338 +279,106 @@ export const toastVariants = cva(
   },
 );
 
-/* -------------------------------------------------------------------------- */
-/*  Types                                                                     */
-/* -------------------------------------------------------------------------- */
-
 export type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
 export type ToastAppearance = NonNullable<VariantProps<typeof toastVariants>['appearance']>;
 
-export interface ToastData {
-  id: string;
-  title: string;
-  description?: string;
-  variant?: ToastVariant;
-  appearance?: ToastAppearance;
-  duration?: number;
-  action?: { label: string; onClick: () => void };
-  icon?: ReactNode;
-}
-
 export interface ToastProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof toastVariants> {
   className?: string;
 }
 
-export interface ToastTitleProps extends HTMLAttributes<HTMLDivElement> {
-  className?: string;
-}
-
-export interface ToastDescriptionProps extends HTMLAttributes<HTMLDivElement> {
-  className?: string;
-}
-
-export interface ToastActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  className?: string;
-}
-
-export interface ToastCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  className?: string;
-}
-
-export interface ToastProviderProps {
-  children: ReactNode;
-  /** Maximum number of visible toasts. @default 5 */
-  max?: number;
-  /** Screen corner for the toast stack. */
-  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-  /** Default visual treatment for toasts without an explicit appearance. */
-  appearance?: ToastAppearance;
-}
-
-/* -------------------------------------------------------------------------- */
-/*  Global singleton store                                                     */
-/*                                                                             */
-/*  Bundlers that transpile this package (e.g. Next.js `transpilePackages`)     */
-/*  may create multiple module instances. Using `globalThis` ensures toast()    */
-/*  and ToastProvider always share the same queue, even across chunks.          */
-/* -------------------------------------------------------------------------- */
-
-type Listener = () => void;
-
-interface ToastStore {
-  toasts: ToastData[];
-  listeners: Set<Listener>;
-  viewports: Set<number>;
-  counter: number;
-  viewportCounter: number;
-}
-
-const STORE_KEY = '__mihcm_toast_store__';
-
-function getStore(): ToastStore {
-  const g = globalThis as unknown as Record<string, ToastStore>;
-  if (!g[STORE_KEY]) {
-    g[STORE_KEY] = { toasts: [], listeners: new Set(), viewports: new Set(), counter: 0, viewportCounter: 0 };
-  }
-  return g[STORE_KEY];
-}
-
-function notify() {
-  for (const l of getStore().listeners) l();
-}
-
-function getSnapshot(): ToastData[] {
-  return getStore().toasts;
-}
-
-function getViewportSnapshot(): number | undefined {
-  return Array.from(getStore().viewports).at(-1);
-}
-
-function subscribe(listener: Listener): () => void {
-  const store = getStore();
-  store.listeners.add(listener);
-  return () => store.listeners.delete(listener);
-}
-
-/** Imperative API — call from anywhere to show a toast. */
-export function toast(data: Omit<ToastData, 'id'>): string {
-  const store = getStore();
-  const id = `toast-${++store.counter}-${Date.now()}`;
-  const entry: ToastData = { id, ...data };
-  store.toasts = [...store.toasts, entry];
-  notify();
-  return id;
-}
-
-function dismiss(id: string) {
-  const store = getStore();
-  store.toasts = store.toasts.filter((t) => t.id !== id);
-  notify();
-}
-
-/* -------------------------------------------------------------------------- */
-/*  Sub-components                                                            */
-/* -------------------------------------------------------------------------- */
-
-const ACCENT: Record<ToastVariant, string> = {
-  default: 'border-l-border',
-  success: 'border-l-success',
-  error: 'border-l-destructive',
-  warning: 'border-l-warning',
-  accent: 'border-l-accent',
-};
-
+/** @deprecated Sonner renders rows internally. Kept for stand-alone use. */
 export const Toast = forwardRef<HTMLDivElement, ToastProps>(function Toast(
   { className, variant = 'default', appearance = 'soft', children, ...props },
   ref,
 ) {
   return (
-    <div
-      ref={ref}
-      className={cn(toastVariants({ variant, appearance }), 'border-l-4', ACCENT[variant ?? 'default'], className)}
-      {...props}
-    >
+    <div ref={ref} className={cn(toastVariants({ variant, appearance }), className)} {...props}>
       {children}
     </div>
   );
 });
 
-export const ToastTitle = forwardRef<HTMLDivElement, ToastTitleProps>(function ToastTitle(
-  { className, ...props },
-  ref,
-) {
-  return <div ref={ref} className={cn('text-sm font-semibold', className)} {...props} />;
-});
+/** @deprecated Use sonner's title slot in `toast()` instead. */
+export const ToastTitle = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function ToastTitle({ className, ...props }, ref) {
+    return <div ref={ref} className={cn('text-sm font-semibold', className)} {...props} />;
+  },
+);
 
-export const ToastDescription = forwardRef<HTMLDivElement, ToastDescriptionProps>(
+/** @deprecated Use sonner's `description` option in `toast()` instead. */
+export const ToastDescription = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   function ToastDescription({ className, ...props }, ref) {
     return <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />;
   },
 );
 
-export const ToastAction = forwardRef<HTMLButtonElement, ToastActionProps>(function ToastAction(
-  { className, ...props },
-  ref,
-) {
-  return (
-    <button
-      ref={ref}
-      type="button"
-      className={cn(
-        'inline-flex shrink-0 items-center rounded-md border border-border bg-transparent px-3 py-1 ' +
-          'text-sm font-medium transition-colors duration-150 hover:bg-muted focus-visible:outline-none ' +
-          'focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  );
-});
+/** @deprecated Use sonner's `action` option in `toast()` instead. */
+export const ToastAction = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function ToastAction({ className, ...props }, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        className={cn(
+          'inline-flex shrink-0 items-center rounded-md border border-border bg-transparent px-3 py-1 text-sm font-medium transition-colors duration-150 hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
 
-export const ToastClose = forwardRef<HTMLButtonElement, ToastCloseProps>(function ToastClose(
-  { className, ...props },
-  ref,
-) {
-  return (
-    <button
-      ref={ref}
-      type="button"
-      aria-label="Close"
-      className={cn(
-        'absolute right-2 top-2 rounded-md p-1 text-foreground/50 transition-opacity hover:text-foreground ' +
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-        className,
-      )}
-      {...props}
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth={2}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        aria-hidden
+/** @deprecated `closeButton` prop on `<Toaster />` renders this automatically. */
+export const ToastClose = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function ToastClose({ className, ...props }, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-label="Close"
+        className={cn(
+          'absolute right-2 top-2 rounded-md p-1 text-foreground/50 transition-opacity hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          className,
+        )}
+        {...props}
       >
-        <path d="M18 6 6 18" />
-        <path d="m6 6 12 12" />
-      </svg>
-    </button>
-  );
-});
-
-/* -------------------------------------------------------------------------- */
-/*  Individual toast item (manages timer + animation)                         */
-/* -------------------------------------------------------------------------- */
-
-const DEFAULT_DURATION = 5000;
-
-function ToastItem({
-  data,
-  onDismiss,
-  appearance,
-}: {
-  data: ToastData;
-  onDismiss: (id: string) => void;
-  appearance: ToastAppearance;
-}) {
-  const [visible, setVisible] = useState(false);
-  const [exiting, setExiting] = useState(false);
-  const timerRef = useRef<ReturnType<typeof setTimeout>>(undefined);
-  const remainingRef = useRef(data.duration ?? DEFAULT_DURATION);
-  // eslint-disable-next-line react-hooks/purity -- initial value only, never re-read during render
-  const startRef = useRef(Date.now());
-
-  const startTimer = useCallback(() => {
-    startRef.current = Date.now();
-    timerRef.current = setTimeout(() => {
-      setExiting(true);
-      setTimeout(() => onDismiss(data.id), 300);
-    }, remainingRef.current);
-  }, [data.id, onDismiss]);
-
-  const pauseTimer = useCallback(() => {
-    if (timerRef.current) {
-      clearTimeout(timerRef.current);
-      remainingRef.current -= Date.now() - startRef.current;
-      if (remainingRef.current < 0) remainingRef.current = 0;
-    }
-  }, []);
-
-  useEffect(() => {
-    // Trigger entry animation on next frame
-    const raf = requestAnimationFrame(() => setVisible(true));
-    startTimer();
-    return () => {
-      cancelAnimationFrame(raf);
-      if (timerRef.current) clearTimeout(timerRef.current);
-    };
-  }, [startTimer]);
-
-  const handleClose = () => {
-    if (timerRef.current) clearTimeout(timerRef.current);
-    setExiting(true);
-    setTimeout(() => onDismiss(data.id), 300);
-  };
-
-  const isError = data.variant === 'error';
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden
+        >
+          <path d="M18 6 6 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      </button>
+    );
+  },
+);
 
-  return (
-    <div
-      role="status"
-      aria-live={isError ? 'assertive' : 'polite'}
-      className={cn(
-        'transform transition-all duration-300',
-        visible && !exiting ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0',
-      )}
-      onMouseEnter={pauseTimer}
-      onMouseLeave={startTimer}
-    >
-      <Toast variant={data.variant} appearance={data.appearance ?? appearance}>
-        {data.icon ? <div className="mt-0.5 shrink-0 text-muted-foreground">{data.icon}</div> : null}
-        <div className="flex-1 space-y-1 pr-6">
-          <ToastTitle>{data.title}</ToastTitle>
-          {data.description !== undefined && (
-            <ToastDescription>{data.description}</ToastDescription>
-          )}
-          {data.action !== undefined && (
-            <div className="mt-2">
-              <ToastAction onClick={data.action.onClick}>{data.action.label}</ToastAction>
-            </div>
-          )}
-        </div>
-        <ToastClose onClick={handleClose} />
-      </Toast>
-    </div>
-  );
+/**
+ * Legacy `ToastData` shape kept for typing in any pre-sonner consumer.
+ * @deprecated Sonner uses its own `ExternalToast` shape; prefer that.
+ */
+export interface ToastData {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  appearance?: ToastAppearance;
+  duration?: number;
+  action?: { label: string; onClick: () => void };
+  icon?: React.ReactNode;
 }
 
-/* -------------------------------------------------------------------------- */
-/*  ToastProvider                                                             */
-/* -------------------------------------------------------------------------- */
-
-const POSITION_CLASS: Record<NonNullable<ToastProviderProps['position']>, string> = {
-  'bottom-right': 'bottom-4 right-4',
-  'bottom-left': 'bottom-4 left-4',
-  'top-right': 'right-4 top-4',
-  'top-left': 'left-4 top-4',
-};
-
-export function ToastProvider({ children, max = 5, position = 'bottom-right', appearance = 'soft' }: ToastProviderProps) {
-  const [viewportId] = useState(() => ++getStore().viewportCounter);
-
-  useEffect(() => {
-    const store = getStore();
-    store.viewports.add(viewportId);
-    notify();
-    return () => {
-      store.viewports.delete(viewportId);
-      notify();
-    };
-  }, [viewportId]);
-
-  const items = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-  const activeViewportId = useSyncExternalStore(subscribe, getViewportSnapshot, () => undefined);
-  const visible = items.slice(-max);
-  const isActiveViewport = viewportId === activeViewportId;
-
-  return (
-    <>
-      {children}
-      {isActiveViewport ? (
-        <div
-          aria-label="Notifications"
-          className={cn('pointer-events-none fixed z-[100] flex max-w-[420px] flex-col gap-2', POSITION_CLASS[position])}
-        >
-          {visible.map((t) => (
-            <ToastItem key={t.id} data={t} onDismiss={dismiss} appearance={appearance} />
-          ))}
-        </div>
-      ) : null}
-    </>
-  );
-}
+export interface ToastTitleProps extends HTMLAttributes<HTMLDivElement> {}
+export interface ToastDescriptionProps extends HTMLAttributes<HTMLDivElement> {}
+export interface ToastActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+export interface ToastCloseProps extends ButtonHTMLAttributes<HTMLButtonElement> {}