@evinvest/uikit 0.2.0 → 0.3.0

package/README.md

@@ -132,9 +132,19 @@ measuring needs host-only `web-sys`). Known gaps:
 - **calendar:** single month, single-date selection (no range/multi-month, no
   locale/dropdown features). Rust does manual date math; TS uses the built-in
   `Date`.
-- **sonner:** TS exposes a global `toast()` backed by a module store with
-  auto-dismiss; Rust uses a `ToasterProvider` + `use_toaster()` hook and omits
-  auto-dismiss (dismiss via the close button or `.dismiss(id)`).
+- **sonner:** both ports stack toasts Sonner-style — a collapsed pile (front
+  three peeking, scaled by depth) that spreads into a list on hover / keyboard
+  focus, via the shared `data-stack` CSS in `tokens.css`. The enter is a CSS
+  keyframe (plays on insertion), the exit slides out on `data-state="closed"` and
+  unmounts on `transitionend` (no host timer). React measures each toast's height
+  for exact expanded spacing; Dioxus can't (layout measuring needs host-only
+  `web-sys`), so it assumes a constant height — collapsed pile exact, expanded
+  list uniform. Both **auto-dismiss** (default 4000ms) and **pause while the stack
+  is hovered/focused**, and support **persistent** toasts; React does it with a
+  `setTimeout` (`duration: Infinity` to persist), Dioxus with a host-timer-free
+  CSS "life" animation whose `animationend` closes the toast (`use_toaster().show(
+  msg, variant, None)` to persist). Swipe-to-dismiss (horizontal drag, past 45px
+  or a fast flick) is TS-only pointer physics.
 - **form:** react-hook-form is dropped — these are presentational + ARIA-id
   wiring; consumers own validation/state. Rust `FormControl` can't inject ids
   onto an arbitrary child (no `Slot`), so the consumer wires them.

package/dist/index.d.ts

@@ -1119,9 +1119,21 @@ interface CalendarProps {
 declare function Calendar({ selected, onSelect, month, defaultMonth, onMonthChange, today, className, }: CalendarProps): React.JSX.Element;
 
 type ToastVariant = "default" | "success" | "error" | "info" | "warning";
+/**
+ * Lifecycle phase of a toast. It is added `"open"` (plays the enter keyframe);
+ * {@link ToastFn.dismiss} flips it to `"closing"` (plays the exit keyframe) and
+ * the live node is dropped once the exit `animationend` fires. Mirrors Rust's
+ * `ToastState` enum and the `data-state` the shared `tokens.css` keys on.
+ */
+type ToastState = "open" | "closing";
 type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 interface ToastOptions {
     description?: React.ReactNode;
+    /**
+     * Auto-dismiss delay in ms (default 4000). Pass `Infinity` for a **persistent**
+     * toast that never times out — it stays until the close button, a swipe, or
+     * `toast.dismiss(id)` removes it. Hovering the stack also pauses the countdown.
+     */
     duration?: number;
     variant?: ToastVariant;
 }
@@ -1131,6 +1143,7 @@ interface Toast {
     description?: React.ReactNode;
     duration: number;
     variant: ToastVariant;
+    state: ToastState;
 }
 interface ToastFn {
     (message: React.ReactNode, opts?: ToastOptions): number;
@@ -1151,9 +1164,16 @@ interface ToasterProps extends React.ComponentProps<"ol"> {
 }
 /**
  * Renders the live toast stack from the module store. Fixed-positioned per
- * `position` (default `bottom-right`); each toast auto-dismisses after its
- * `duration` (default 4000ms) via `setTimeout`. Single dark palette — no theme
- * switching (the upstream `next-themes` dependency is dropped).
+ * `position` (default `bottom-right`).
+ *
+ * Stacking mirrors Sonner: toasts pile up collapsed (the front three peeking,
+ * each scaled + lifted by depth and clamped to the front toast's height) and
+ * spread into a list on hover / keyboard focus — driven by the measured
+ * `--front-height`/`--offset` vars and the `data-stack` CSS in `tokens.css`.
+ * Each toast auto-dismisses after its `duration` (default 4000ms) via the same
+ * animated `dismiss` as the close button (`data-state="closed"` → slide out →
+ * unmount on `transitionend`), and is swipe-to-dismiss (horizontal drag, TS-only
+ * pointer physics). Single dark palette — no theme switching.
  */
 declare function Toaster({ position, className, ...props }: ToasterProps): React.JSX.Element;
 
@@ -1186,4 +1206,4 @@ interface ResizableHandleProps extends React.ComponentProps<"div"> {
 }
 declare function ResizableHandle({ className, index, withHandle, children, ...props }: ResizableHandleProps): React.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, type AlertDialogOverlayProps, type AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, AlertTitle, type AlertVariant, type Align, AspectRatio, type AspectRatioProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BadgeVariant, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, type ButtonGroupTextProps, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, Calendar, type CalendarProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselProps, type ChartConfig, ChartContainer, type ChartItem, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, type CommandGroupProps, CommandInput, CommandItem, type CommandItemProps, CommandList, type CommandProps, CommandSeparator, CommandShortcut, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, ContextMenuGroup, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuPortal, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, DialogTrigger, type DialogTriggerProps, Drawer, DrawerClose, type DrawerCloseProps, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, type DrawerProps, DrawerTitle, DrawerTrigger, type DrawerTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, type EmptyMediaVariant, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, FieldTitle, type FloatingResult, Form, FormControl, FormDescription, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, type HoverCardTriggerProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonAlign, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupButtonSize, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputOTPSlotProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemMediaProps, type ItemMediaVariant, type ItemProps, ItemSeparator, type ItemSize, ItemTitle, type ItemVariant, Kbd, KbdGroup, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, type MenubarMenuProps, MenubarRadioGroup, type MenubarRadioGroupProps, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, type MenubarSubProps, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, type PopoverAnchorProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type ResizableDirection, ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, ScrollArea, ScrollBar, type ScrollBarProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, type SelectProps, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorOrientation, type SeparatorProps, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, type SheetOverlayProps, type SheetProps, SheetTitle, SheetTrigger, type SheetTriggerProps, type Side, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, type SidebarMenuButtonVariant, SidebarMenuItem, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SliderProps, Slot, type SlotProps, Spinner, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type Toast, type ToastFn, type ToastOptions, type ToastPosition, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToggleSize, type ToggleVariant, type ToggleVariantsOptions, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, buttonVariants, cn, mergeRefs, navigationMenuTriggerStyle, toast, toggleVariants, useControllableState, useDismissableLayer, useFloating, useFocusScope, usePresence, useRovingFocus, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, type AlertDialogOverlayProps, type AlertDialogProps, AlertDialogTitle, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, AlertTitle, type AlertVariant, type Align, AspectRatio, type AspectRatioProps, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, type BadgeVariant, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, ButtonGroupSeparator, ButtonGroupText, type ButtonGroupTextProps, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantsOptions, Calendar, type CalendarProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, type CarouselProps, type ChartConfig, ChartContainer, type ChartItem, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandGroup, type CommandGroupProps, CommandInput, CommandItem, type CommandItemProps, CommandList, type CommandProps, CommandSeparator, CommandShortcut, Container, type ContainerProps, ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, ContextMenuContent, ContextMenuGroup, ContextMenuItem, type ContextMenuItemProps, ContextMenuLabel, type ContextMenuLabelProps, ContextMenuPortal, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, type ContextMenuSubProps, ContextMenuSubTrigger, type ContextMenuSubTriggerProps, ContextMenuTrigger, type ContextMenuTriggerProps, Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, DialogTrigger, type DialogTriggerProps, Drawer, DrawerClose, type DrawerCloseProps, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, type DrawerProps, DrawerTitle, DrawerTrigger, type DrawerTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, type EmptyMediaProps, type EmptyMediaVariant, EmptyTitle, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, FieldTitle, type FloatingResult, Form, FormControl, FormDescription, FormItem, FormLabel, FormMessage, HoverCard, HoverCardContent, type HoverCardContentProps, type HoverCardProps, HoverCardTrigger, type HoverCardTriggerProps, Input, InputGroup, InputGroupAddon, type InputGroupAddonAlign, type InputGroupAddonProps, InputGroupButton, type InputGroupButtonProps, type InputGroupButtonSize, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputOTPSlotProps, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, type ItemMediaProps, type ItemMediaVariant, type ItemProps, ItemSeparator, type ItemSize, ItemTitle, type ItemVariant, Kbd, KbdGroup, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, type MenubarMenuProps, MenubarRadioGroup, type MenubarRadioGroupProps, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, type MenubarSubProps, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, type PopoverAnchorProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, Progress, type ProgressProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type ResizableDirection, ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, ScrollArea, ScrollBar, type ScrollBarProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, type SelectProps, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, Separator, type SeparatorOrientation, type SeparatorProps, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, type SheetOverlayProps, type SheetProps, SheetTitle, SheetTrigger, type SheetTriggerProps, type Side, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, type SidebarMenuButtonProps, type SidebarMenuButtonSize, type SidebarMenuButtonVariant, SidebarMenuItem, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SliderProps, Slot, type SlotProps, Spinner, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, type Toast, type ToastFn, type ToastOptions, type ToastPosition, type ToastState, type ToastVariant, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, type ToggleSize, type ToggleVariant, type ToggleVariantsOptions, Tooltip, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, type TooltipTriggerProps, buttonVariants, cn, mergeRefs, navigationMenuTriggerStyle, toast, toggleVariants, useControllableState, useDismissableLayer, useFloating, useFocusScope, usePresence, useRovingFocus, useSidebar };

package/dist/index.js

@@ -6032,6 +6032,9 @@ function Calendar({
 import * as React61 from "react";
 import { jsx as jsx52, jsxs as jsxs22 } from "react/jsx-runtime";
 var DEFAULT_DURATION = 4e3;
+var SWIPE_THRESHOLD = 45;
+var SWIPE_VELOCITY = 0.11;
+var SWIPE_FLING_MS = 200;
 var store = /* @__PURE__ */ (() => {
   let toasts = [];
   let id = 0;
@@ -6045,13 +6048,20 @@ var store = /* @__PURE__ */ (() => {
       message,
       description: opts.description,
       duration: opts.duration ?? DEFAULT_DURATION,
-      variant: opts.variant ?? "default"
+      variant: opts.variant ?? "default",
+      state: "open"
     };
     toasts = [...toasts, next];
     emit();
     return next.id;
   };
   const dismiss = (toastId) => {
+    toasts = toasts.map(
+      (t) => t.id === toastId ? { ...t, state: "closing" } : t
+    );
+    emit();
+  };
+  const remove = (toastId) => {
     toasts = toasts.filter((t) => t.id !== toastId);
     emit();
   };
@@ -6062,7 +6072,7 @@ var store = /* @__PURE__ */ (() => {
       listeners.delete(listener);
     };
   };
-  return { add, dismiss, subscribe };
+  return { add, dismiss, remove, subscribe };
 })();
 var toast = Object.assign(
   (message, opts) => store.add(message, opts),
@@ -6082,28 +6092,141 @@ var toastVariantClasses = {
   warning: "bg-popover text-popover-foreground border-border"
 };
 var positionClasses = {
-  "top-left": "top-0 left-0 items-start",
-  "top-center": "top-0 left-1/2 -translate-x-1/2 items-center",
-  "top-right": "top-0 right-0 items-end",
-  "bottom-left": "bottom-0 left-0 items-start",
-  "bottom-center": "bottom-0 left-1/2 -translate-x-1/2 items-center",
-  "bottom-right": "bottom-0 right-0 items-end"
+  "top-left": "top-4 left-4",
+  "top-center": "top-4 left-1/2 -translate-x-1/2",
+  "top-right": "top-4 right-4",
+  "bottom-left": "bottom-4 left-4",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2",
+  "bottom-right": "bottom-4 right-4"
 };
-function ToastItem({ toast: t }) {
+var VISIBLE_TOASTS = 3;
+var GAP = 14;
+function ToastItem({
+  toast: t,
+  index,
+  total,
+  offset,
+  paused,
+  reportHeight,
+  removeHeight
+}) {
+  const ref = React61.useRef(null);
+  const [height, setHeight] = React61.useState(0);
+  const remainingRef = React61.useRef(t.duration);
+  const startedRef = React61.useRef(0);
+  const flingRef = React61.useRef(
+    void 0
+  );
+  const dragRef = React61.useRef(
+    null
+  );
+  React61.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    const h = el.getBoundingClientRect().height;
+    el.style.height = "";
+    if (h) {
+      setHeight(h);
+      reportHeight(t.id, h);
+    }
+  }, [t.id, t.message, t.description, reportHeight]);
+  React61.useEffect(() => () => removeHeight(t.id), [t.id, removeHeight]);
   React61.useEffect(() => {
-    if (t.duration === Infinity) return;
-    const timer = setTimeout(() => store.dismiss(t.id), t.duration);
-    return () => clearTimeout(timer);
-  }, [t.id, t.duration]);
+    if (t.duration === Infinity || t.state === "closing" || paused) return;
+    startedRef.current = Date.now();
+    const id = setTimeout(() => store.dismiss(t.id), remainingRef.current);
+    return () => {
+      clearTimeout(id);
+      remainingRef.current = Math.max(
+        0,
+        remainingRef.current - (Date.now() - startedRef.current)
+      );
+    };
+  }, [paused, t.id, t.duration, t.state]);
+  React61.useEffect(
+    () => () => {
+      if (flingRef.current) clearTimeout(flingRef.current);
+    },
+    []
+  );
+  const onTransitionEnd = (e) => {
+    if (t.state === "closing" && e.propertyName === "transform") {
+      store.remove(t.id);
+    }
+  };
+  const onPointerDown = (e) => {
+    const el = ref.current;
+    if (!el || e.button > 0 || t.state === "closing") return;
+    if (e.target.closest('[data-slot="toast-close"]')) return;
+    dragRef.current = { x: e.clientX, time: e.timeStamp, dx: 0 };
+    el.setAttribute("data-swiping", "true");
+    try {
+      el.setPointerCapture?.(e.pointerId);
+    } catch {
+    }
+  };
+  const onPointerMove = (e) => {
+    const drag = dragRef.current;
+    const el = ref.current;
+    if (!drag || !el) return;
+    const dx = e.clientX - drag.x;
+    drag.dx = dx;
+    const dist = el.offsetWidth || 256;
+    el.style.setProperty("--swipe-x", `${dx}px`);
+    el.style.opacity = `${Math.max(0, 1 - Math.abs(dx) / dist)}`;
+  };
+  const onPointerEnd = (e) => {
+    const drag = dragRef.current;
+    const el = ref.current;
+    if (!drag || !el) return;
+    dragRef.current = null;
+    el.removeAttribute("data-swiping");
+    const dt = e.timeStamp - drag.time;
+    const velocity = dt > 0 ? Math.abs(drag.dx) / dt : 0;
+    if (drag.dx !== 0 && (Math.abs(drag.dx) >= SWIPE_THRESHOLD || velocity > SWIPE_VELOCITY)) {
+      el.style.setProperty("--swipe-x", `${drag.dx > 0 ? 150 : -150}%`);
+      el.style.opacity = "0";
+      const remove = () => store.remove(t.id);
+      el.addEventListener("transitionend", remove, { once: true });
+      flingRef.current = setTimeout(remove, SWIPE_FLING_MS + 50);
+    } else {
+      el.style.setProperty("--swipe-x", "0px");
+      el.style.opacity = "1";
+      el.addEventListener(
+        "transitionend",
+        () => {
+          el.style.removeProperty("--swipe-x");
+          el.style.opacity = "";
+        },
+        { once: true }
+      );
+    }
+  };
   return /* @__PURE__ */ jsxs22(
     "li",
     {
+      ref,
       role: "status",
       "aria-live": "polite",
       "data-slot": "toast",
       "data-variant": t.variant,
+      "data-state": t.state === "closing" ? "closed" : "open",
+      "data-front": index === 0,
+      "data-visible": index < VISIBLE_TOASTS,
+      onTransitionEnd,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: onPointerEnd,
+      onPointerCancel: onPointerEnd,
+      style: {
+        "--index": index,
+        "--z-index": total - index,
+        "--offset": `${offset}px`,
+        "--initial-height": `${height}px`
+      },
       className: cn(
-        "pointer-events-auto flex w-full items-start gap-3 rounded-md border p-4 text-sm shadow-lg",
+        "pointer-events-auto flex w-full touch-pan-y items-start gap-3 rounded-md border p-4 text-sm shadow-lg select-none",
         toastVariantClasses[t.variant]
       ),
       children: [
@@ -6147,19 +6270,75 @@ function Toaster({
   ...props
 }) {
   const [toasts, setToasts] = React61.useState([]);
+  const [heights, setHeights] = React61.useState(/* @__PURE__ */ new Map());
+  const [paused, setPaused] = React61.useState(false);
   React61.useEffect(() => store.subscribe(setToasts), []);
+  const onEnter = () => setPaused(true);
+  const onLeave = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setPaused(false);
+    }
+  };
+  const reportHeight = React61.useCallback((id, h) => {
+    setHeights((prev) => {
+      if (prev.get(id) === h) return prev;
+      const next = new Map(prev);
+      next.set(id, h);
+      return next;
+    });
+  }, []);
+  const removeHeight = React61.useCallback((id) => {
+    setHeights((prev) => {
+      if (!prev.has(id)) return prev;
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+  const yPosition = position.startsWith("top") ? "top" : "bottom";
+  const ordered = [...toasts].reverse();
+  const known = [...heights.values()];
+  const frontHeight = ordered[0] ? heights.get(ordered[0].id) ?? (known.length ? Math.max(...known) : 0) : 0;
+  let sum = 0;
+  const offsets = ordered.map((t, i) => {
+    const o = sum + i * GAP;
+    sum += heights.get(t.id) ?? 0;
+    return o;
+  });
   return /* @__PURE__ */ jsx52(
     "ol",
     {
       "data-slot": "toaster",
       "data-position": position,
+      "data-y-position": yPosition,
+      "data-stack": "",
+      style: {
+        "--front-height": `${frontHeight}px`,
+        "--gap": `${GAP}px`
+      },
       className: cn(
-        "pointer-events-none fixed z-100 flex w-[calc(100%-2rem)] max-w-sm flex-col gap-2 p-4",
+        "pointer-events-none fixed z-100 w-[calc(100%-2rem)] max-w-sm",
         positionClasses[position],
         className
       ),
       ...props,
-      children: toasts.map((t) => /* @__PURE__ */ jsx52(ToastItem, { toast: t }, t.id))
+      onPointerOver: onEnter,
+      onPointerOut: onLeave,
+      onFocus: onEnter,
+      onBlur: onLeave,
+      children: ordered.map((t, i) => /* @__PURE__ */ jsx52(
+        ToastItem,
+        {
+          toast: t,
+          index: i,
+          total: ordered.length,
+          offset: offsets[i],
+          paused,
+          reportHeight,
+          removeHeight
+        },
+        t.id
+      ))
     }
   );
 }