@mihcm/ui 0.15.1 → 0.16.1

package/README.md

@@ -6,9 +6,9 @@ This is the primary component package. It ships typed, tokenized primitives with
 
 ## Current release
 
-Current package version: **0.14.1**.
+Current package version: **0.16.0**.
 
-This release removes the experimental editor surface, keeps rich text on `RichTextEditor`, fixes full-width DatePicker popup sizing, and stabilizes Tracker weighted/timeline layouts. See `CHANGELOG.md` and the public changelog at `https://designsystem.mihcm.com/help/changelog`.
+This release rebuilds `Toast` on top of [sonner](https://github.com/emilkowalski/sonner) (themed end-to-end with MiHCM tokens) and lands the `MainSidebar` polish + whitelabel layer: five interaction variants (drilldown / floating / columns / command / hover), shadcn-style `collapsible="icon"`, mobile hamburger + Sheet pattern, vertical guide lines for arbitrary nesting, and a 14-token `colorScheme` prop for full whitelabeling. See `CHANGELOG.md` and the public changelog at `https://designsystem.mihcm.com/help/changelog`.
 
 ## Install
 
@@ -58,6 +58,12 @@ Variant styling uses proven helpers rather than handwritten class maps: `class-v
 
 ## Recent additions and fixes
 
+### 0.16.0
+- **Toast** rebuilt on top of [sonner](https://github.com/emilkowalski/sonner). Exposes the full upstream feature set (`toast.success/error/warning/info/message/loading`, `toast.promise`, `toast.custom`, action+cancel buttons, swipe-to-dismiss, expand-on-hover, theme switching) with MiHCM tokens mapped through sonner's CSS variables so surface, type tints, and buttons follow the design-system palette in light + dark mode. Legacy `<ToastProvider>` + `<Toast>` sub-components remain as deprecated shims.
+- **MainSidebar** ships shadcn-style collapsible toggle (`collapsible="icon"`), five interaction variants, deep-nesting breadcrumbs (`PathBreadcrumb`), mobile hamburger pattern via existing `Sheet`, and a 14-token `colorScheme` prop (`bg`, `fg`, `railBg`, `railFg`, `panelBg`, `panelFg`, `accentBg`, `accentFg`, `border`, `mutedFg`, `hoverBg`, `ring`, `tooltipBg`, `tooltipFg`) that cascades through every nested affordance — including tooltips, badges, breadcrumbs, panel surfaces, and dividers. Outside-click + Esc dismissal unified, columns variant `flushSync`-resets deep stack on close, focus uses `preventScroll`.
+- **Icons + badges in active rows** inherit `currentColor` from the parent button so themed accent surfaces render the right contrast.
+
+### 0.15.0
 - Added a semantic `Link` primitive for real navigation, with inline, nav, standalone, button-like, muted, foreground, and accent variants.
 - Added semantic `Text as="h1" | "h2" | "p" | ...` rendering so docs, apps, and AI-generated text preserve the actual document outline instead of styling generic spans.
 - Made `Button` default to `type="button"` while still supporting explicit `type="submit"` and `type="reset"` for form actions.

package/dist/Toast.d.ts

@@ -1,29 +1,113 @@
 /**
  * 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 { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import { type ButtonHTMLAttributes, type ComponentProps, type HTMLAttributes } from 'react';
+import { Toaster as SonnerToaster, toast as sonnerToast } from 'sonner';
 import { type VariantProps } from 'class-variance-authority';
+/**
+ * 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 declare const toast: typeof sonnerToast;
+export type { ExternalToast, ToastT, ToasterProps } from 'sonner';
+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 declare function Toaster({ position, expand, richColors, closeButton, visibleToasts, duration, theme, toastOptions, className, appearance, ...rest }: MihcmToasterProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * @deprecated Use `<Toaster />` instead. Kept as a wrapping component for
+ * pre-sonner consumers — renders children, then mounts the Toaster portal.
+ */
+export declare function ToastProvider({ children, ...rest }: MihcmToasterProps & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export type ToastProviderProps = MihcmToasterProps & {
+    children?: React.ReactNode;
+};
 export declare const toastVariants: (props?: ({
     variant?: "accent" | "default" | "success" | "warning" | "error" | null | undefined;
     appearance?: "outline" | "solid" | "soft" | "minimal" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ToastVariant = NonNullable<VariantProps<typeof toastVariants>['variant']>;
 export type ToastAppearance = NonNullable<VariantProps<typeof toastVariants>['appearance']>;
+export interface ToastProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof toastVariants> {
+    className?: string;
+}
+/** @deprecated Sonner renders rows internally. Kept for stand-alone use. */
+export declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;
+/** @deprecated Use sonner's title slot in `toast()` instead. */
+export declare const ToastTitle: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** @deprecated Use sonner's `description` option in `toast()` instead. */
+export declare const ToastDescription: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+/** @deprecated Use sonner's `action` option in `toast()` instead. */
+export declare const ToastAction: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+/** @deprecated `closeButton` prop on `<Toaster />` renders this automatically. */
+export declare const ToastClose: import("react").ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * 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;
@@ -35,38 +119,14 @@ export interface ToastData {
         label: string;
         onClick: () => void;
     };
-    icon?: ReactNode;
-}
-export interface ToastProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof toastVariants> {
-    className?: string;
+    icon?: React.ReactNode;
 }
 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;
-}
-/** Imperative API — call from anywhere to show a toast. */
-export declare function toast(data: Omit<ToastData, 'id'>): string;
-export declare const Toast: import("react").ForwardRefExoticComponent<ToastProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ToastTitle: import("react").ForwardRefExoticComponent<ToastTitleProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ToastDescription: import("react").ForwardRefExoticComponent<ToastDescriptionProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const ToastAction: import("react").ForwardRefExoticComponent<ToastActionProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const ToastClose: import("react").ForwardRefExoticComponent<ToastCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare function ToastProvider({ children, max, position, appearance }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Toast.d.ts.map

package/dist/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAOL,KAAK,oBAAoB,EACzB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAOlE,eAAO,MAAM,aAAa;;;8EAiCzB,CAAC;AAMF,MAAM,MAAM,YAAY,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;AACtF,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;AAE5F,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,CAAC;IAChD,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IACpG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,gBAAiB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,mDAAmD;IACnD,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACrE,0EAA0E;IAC1E,UAAU,CAAC,EAAE,eAAe,CAAC;CAC9B;AAgDD,2DAA2D;AAC3D,wBAAgB,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,MAAM,CAOzD;AAoBD,eAAO,MAAM,KAAK,uGAahB,CAAC;AAEH,eAAO,MAAM,UAAU,4GAKrB,CAAC;AAEH,eAAO,MAAM,gBAAgB,kHAI5B,CAAC;AAEF,eAAO,MAAM,WAAW,gHAiBtB,CAAC;AAEH,eAAO,MAAM,UAAU,+GAiCrB,CAAC;AAmGH,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,QAAyB,EAAE,UAAmB,EAAE,EAAE,kBAAkB,2CAiCtH"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"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"}

package/dist/Toast.js

@@ -1,31 +1,157 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * 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, } from 'react';
+import { forwardRef, } from 'react';
+import { Toaster as SonnerToaster, toast as sonnerToast } from 'sonner';
 import { cva } 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 = sonnerToast;
+/**
+ * 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 }) {
+    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)',
+    };
+    return (_jsx(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.                                                 */
 /* -------------------------------------------------------------------------- */
-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', {
+/**
+ * @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 }) {
+    return (_jsxs(_Fragment, { children: [children, _jsx(Toaster, { ...rest })] }));
+}
+/* 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', {
     variants: {
         variant: {
             default: 'border-border bg-card text-foreground',
@@ -55,140 +181,24 @@ export const toastVariants = cva('pointer-events-auto relative flex w-full items
     ],
     defaultVariants: { variant: 'default', appearance: 'soft' },
 });
-const STORE_KEY = '__mihcm_toast_store__';
-function getStore() {
-    const g = globalThis;
-    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() {
-    return getStore().toasts;
-}
-function getViewportSnapshot() {
-    return Array.from(getStore().viewports).at(-1);
-}
-function subscribe(listener) {
-    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) {
-    const store = getStore();
-    const id = `toast-${++store.counter}-${Date.now()}`;
-    const entry = { id, ...data };
-    store.toasts = [...store.toasts, entry];
-    notify();
-    return id;
-}
-function dismiss(id) {
-    const store = getStore();
-    store.toasts = store.toasts.filter((t) => t.id !== id);
-    notify();
-}
-/* -------------------------------------------------------------------------- */
-/*  Sub-components                                                            */
-/* -------------------------------------------------------------------------- */
-const ACCENT = {
-    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(function Toast({ className, variant = 'default', appearance = 'soft', children, ...props }, ref) {
-    return (_jsx("div", { ref: ref, className: cn(toastVariants({ variant, appearance }), 'border-l-4', ACCENT[variant ?? 'default'], className), ...props, children: children }));
+    return (_jsx("div", { ref: ref, className: cn(toastVariants({ variant, appearance }), className), ...props, children: children }));
 });
+/** @deprecated Use sonner's title slot in `toast()` instead. */
 export const ToastTitle = forwardRef(function ToastTitle({ className, ...props }, ref) {
     return _jsx("div", { ref: ref, className: cn('text-sm font-semibold', className), ...props });
 });
+/** @deprecated Use sonner's `description` option in `toast()` instead. */
 export const ToastDescription = forwardRef(function ToastDescription({ className, ...props }, ref) {
     return _jsx("div", { ref: ref, className: cn('text-sm text-muted-foreground', className), ...props });
 });
+/** @deprecated Use sonner's `action` option in `toast()` instead. */
 export const ToastAction = forwardRef(function ToastAction({ className, ...props }, ref) {
-    return (_jsx("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 }));
+    return (_jsx("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 `closeButton` prop on `<Toaster />` renders this automatically. */
 export const ToastClose = forwardRef(function ToastClose({ className, ...props }, ref) {
-    return (_jsx("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, children: _jsxs("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": true, children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }) }));
+    return (_jsx("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, children: _jsxs("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": true, children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }) }));
 });
-/* -------------------------------------------------------------------------- */
-/*  Individual toast item (manages timer + animation)                         */
-/* -------------------------------------------------------------------------- */
-const DEFAULT_DURATION = 5000;
-function ToastItem({ data, onDismiss, appearance, }) {
-    const [visible, setVisible] = useState(false);
-    const [exiting, setExiting] = useState(false);
-    const timerRef = useRef(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';
-    return (_jsx("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, children: _jsxs(Toast, { variant: data.variant, appearance: data.appearance ?? appearance, children: [data.icon ? _jsx("div", { className: "mt-0.5 shrink-0 text-muted-foreground", children: data.icon }) : null, _jsxs("div", { className: "flex-1 space-y-1 pr-6", children: [_jsx(ToastTitle, { children: data.title }), data.description !== undefined && (_jsx(ToastDescription, { children: data.description })), data.action !== undefined && (_jsx("div", { className: "mt-2", children: _jsx(ToastAction, { onClick: data.action.onClick, children: data.action.label }) }))] }), _jsx(ToastClose, { onClick: handleClose })] }) }));
-}
-/* -------------------------------------------------------------------------- */
-/*  ToastProvider                                                             */
-/* -------------------------------------------------------------------------- */
-const POSITION_CLASS = {
-    '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' }) {
-    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 (_jsxs(_Fragment, { children: [children, isActiveViewport ? (_jsx("div", { "aria-label": "Notifications", className: cn('pointer-events-none fixed z-[100] flex max-w-[420px] flex-col gap-2', POSITION_CLASS[position]), children: visible.map((t) => (_jsx(ToastItem, { data: t, onDismiss: dismiss, appearance: appearance }, t.id))) })) : null] }));
-}
 //# sourceMappingURL=Toast.js.map

package/dist/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EACL,UAAU,EACV,WAAW,EACX,SAAS,EACT,MAAM,EACN,QAAQ,EACR,oBAAoB,GAIrB,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,EAAE,EAAE,MAAM,kBAAkB,CAAC;AAEtC,gFAAgF;AAChF,gFAAgF;AAChF,gFAAgF;AAEhF,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAC9B,6GAA6G;IAC3G,sCAAsC,EACxC;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,uCAAuC;YAChD,OAAO,EAAE,iDAAiD;YAC1D,KAAK,EAAE,yDAAyD;YAChE,OAAO,EAAE,iDAAiD;YAC1D,MAAM,EAAE,+CAA+C;SACxD;QACD,UAAU,EAAE;YACV,IAAI,EAAE,EAAE;YACR,KAAK,EAAE,EAAE;YACT,OAAO,EAAE,SAAS;YAClB,OAAO,EAAE,8CAA8C;SACxD;KACF;IACD,gBAAgB,EAAE;QAChB,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,iDAAiD,EAAE;QACzG,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,mDAAmD,EAAE;QAC3G,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,+DAA+D,EAAE;QACrH,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,mDAAmD,EAAE;QAC3G,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,gDAAgD,EAAE;QACvG,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE;QACzE,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE;QAC1E,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE;QAC5E,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE;QAC1E,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE;KACzE;IACD,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,EAAE;CAC5D,CACF,CAAC;AAoEF,MAAM,SAAS,GAAG,uBAAuB,CAAC;AAE1C,SAAS,QAAQ;IACf,MAAM,CAAC,GAAG,UAAmD,CAAC;IAC9D,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC;QAClB,CAAC,CAAC,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,IAAI,GAAG,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,CAAC;IAC5G,CAAC;IACD,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC;AACtB,CAAC;AAED,SAAS,MAAM;IACb,KAAK,MAAM,CAAC,IAAI,QAAQ,EAAE,CAAC,SAAS;QAAE,CAAC,EAAE,CAAC;AAC5C,CAAC;AAED,SAAS,WAAW;IAClB,OAAO,QAAQ,EAAE,CAAC,MAAM,CAAC;AAC3B,CAAC;AAED,SAAS,mBAAmB;IAC1B,OAAO,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AACjD,CAAC;AAED,SAAS,SAAS,CAAC,QAAkB;IACnC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC9B,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;AAChD,CAAC;AAED,2DAA2D;AAC3D,MAAM,UAAU,KAAK,CAAC,IAA2B;IAC/C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,EAAE,GAAG,SAAS,EAAE,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC;IACpD,MAAM,KAAK,GAAc,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,CAAC;IACzC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACxC,MAAM,EAAE,CAAC;IACT,OAAO,EAAE,CAAC;AACZ,CAAC;AAED,SAAS,OAAO,CAAC,EAAU;IACzB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IACvD,MAAM,EAAE,CAAC;AACX,CAAC;AAED,gFAAgF;AAChF,gFAAgF;AAChF,gFAAgF;AAEhF,MAAM,MAAM,GAAiC;IAC3C,OAAO,EAAE,iBAAiB;IAC1B,OAAO,EAAE,kBAAkB;IAC3B,KAAK,EAAE,sBAAsB;IAC7B,OAAO,EAAE,kBAAkB;IAC3B,MAAM,EAAE,iBAAiB;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA6B,SAAS,KAAK,CACxE,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,UAAU,GAAG,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAC3E,GAAG;IAEH,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC,EAAE,YAAY,EAAE,MAAM,CAAC,OAAO,IAAI,SAAS,CAAC,EAAE,SAAS,CAAC,KACxG,KAAK,YAER,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAkC,SAAS,UAAU,CACvF,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvB,GAAG;IAEH,OAAO,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AACzF,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CACxC,SAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG;IACpD,OAAO,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;AACjG,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAsC,SAAS,WAAW,CAC7F,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvB,GAAG;IAEH,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CACX,6FAA6F;YAC3F,+FAA+F;YAC/F,+FAA+F,EACjG,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAqC,SAAS,UAAU,CAC1F,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACvB,GAAG;IAEH,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,gBACF,OAAO,EAClB,SAAS,EAAE,EAAE,CACX,oGAAoG;YAClG,yEAAyE,EAC3E,SAAS,CACV,KACG,KAAK,YAET,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,WAAW,EAAE,CAAC,EACd,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,kCAGtB,eAAM,CAAC,EAAC,YAAY,GAAG,EACvB,eAAM,CAAC,EAAC,YAAY,GAAG,IACnB,GACC,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gFAAgF;AAChF,gFAAgF;AAChF,gFAAgF;AAEhF,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAE9B,SAAS,SAAS,CAAC,EACjB,IAAI,EACJ,SAAS,EACT,UAAU,GAKX;IACC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,MAAM,CAAgC,SAAS,CAAC,CAAC;IAClE,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC,CAAC;IAC/D,iGAAiG;IACjG,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAEpC,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAC9B,QAAQ,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACjC,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;QAC5C,CAAC,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC;IAEzB,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC;YACrB,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;YAC/B,YAAY,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC;YACtD,IAAI,YAAY,CAAC,OAAO,GAAG,CAAC;gBAAE,YAAY,CAAC,OAAO,GAAG,CAAC,CAAC;QACzD,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,wCAAwC;QACxC,MAAM,GAAG,GAAG,qBAAqB,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;QAC1D,UAAU,EAAE,CAAC;QACb,OAAO,GAAG,EAAE;YACV,oBAAoB,CAAC,GAAG,CAAC,CAAC;YAC1B,IAAI,QAAQ,CAAC,OAAO;gBAAE,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACvD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,QAAQ,CAAC,OAAO;YAAE,YAAY,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;QACrD,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;IAC5C,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC;IAEzC,OAAO,CACL,cACE,IAAI,EAAC,QAAQ,eACF,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,EAC3C,SAAS,EAAE,EAAE,CACX,uCAAuC,EACvC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,4BAA4B,CACjF,EACD,YAAY,EAAE,UAAU,EACxB,YAAY,EAAE,UAAU,YAExB,MAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,UAAU,aACpE,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,uCAAuC,YAAE,IAAI,CAAC,IAAI,GAAO,CAAC,CAAC,CAAC,IAAI,EAC5F,eAAK,SAAS,EAAC,uBAAuB,aACpC,KAAC,UAAU,cAAE,IAAI,CAAC,KAAK,GAAc,EACpC,IAAI,CAAC,WAAW,KAAK,SAAS,IAAI,CACjC,KAAC,gBAAgB,cAAE,IAAI,CAAC,WAAW,GAAoB,CACxD,EACA,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,CAC5B,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,WAAW,IAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,YAAG,IAAI,CAAC,MAAM,CAAC,KAAK,GAAe,GACxE,CACP,IACG,EACN,KAAC,UAAU,IAAC,OAAO,EAAE,WAAW,GAAI,IAC9B,GACJ,CACP,CAAC;AACJ,CAAC;AAED,gFAAgF;AAChF,gFAAgF;AAChF,gFAAgF;AAEhF,MAAM,cAAc,GAAgE;IAClF,cAAc,EAAE,kBAAkB;IAClC,aAAa,EAAE,iBAAiB;IAChC,WAAW,EAAE,eAAe;IAC5B,UAAU,EAAE,cAAc;CAC3B,CAAC;AAEF,MAAM,UAAU,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC,EAAE,QAAQ,GAAG,cAAc,EAAE,UAAU,GAAG,MAAM,EAAsB;IACrH,MAAM,CAAC,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,eAAe,CAAC,CAAC;IAElE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;QACzB,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAChC,MAAM,EAAE,CAAC;QACT,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;YACnC,MAAM,EAAE,CAAC;QACX,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,KAAK,GAAG,oBAAoB,CAAC,SAAS,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;IACxE,MAAM,gBAAgB,GAAG,oBAAoB,CAAC,SAAS,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC;IAC/F,MAAM,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,gBAAgB,GAAG,UAAU,KAAK,gBAAgB,CAAC;IAEzD,OAAO,CACL,8BACG,QAAQ,EACR,gBAAgB,CAAC,CAAC,CAAC,CAClB,4BACa,eAAe,EAC1B,SAAS,EAAE,EAAE,CAAC,qEAAqE,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,YAE7G,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAClB,KAAC,SAAS,IAAY,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,IAAzD,CAAC,CAAC,EAAE,CAAyD,CAC9E,CAAC,GACE,CACP,CAAC,CAAC,CAAC,IAAI,IACP,CACJ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../src/Toast.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mihcm/ui",
-  "version": "0.15.1",
+  "version": "0.16.1",
   "description": "Universal primitives (Button, Input, ...) for React, Next.js, and React Native. Tailwind 4 + NativeWind v5.",
   "license": "MIT",
   "private": false,
@@ -454,11 +454,12 @@
     "react-resizable-panels": "4.11.1",
     "react-select": "^5.10.2",
     "recharts": "^3.8.1",
+    "sonner": "2.0.7",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "3.2.2",
     "vaul": "1.1.2",
-    "@mihcm/theme": "0.2.10",
-    "@mihcm/tokens": "0.6.3"
+    "@mihcm/theme": "0.2.11",
+    "@mihcm/tokens": "0.6.4"
   },
   "peerDependencies": {
     "nativewind": ">=4.1.0",
@@ -487,7 +488,7 @@
     "react-dom": "19.2.6",
     "react-native": "0.85.3",
     "typescript": "^6.0.3",
-    "@mihcm/eslint-config": "0.1.3"
+    "@mihcm/eslint-config": "0.1.4"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

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> {}