@kala-ui/react 0.0.1-beta.1

package/dist/src/components/toast/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Custom toast wrapper with proper variant styling
+ */
+declare const toast: {
+    success: (message: string) => string | number;
+    error: (message: string) => string | number;
+    warning: (message: string) => string | number;
+    info: (message: string) => string | number;
+    loading: (message: string) => string | number;
+};
+export { toast };
+export { Toaster } from "./toaster";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/toast/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/index.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,QAAA,MAAM,KAAK;uBACS,MAAM;qBAGR,MAAM;uBAGJ,MAAM;oBAGT,MAAM;uBAGH,MAAM;CAGzB,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/src/components/toast/index.js

@@ -0,0 +1,24 @@
+import { toast as sonnerToast } from "sonner";
+/**
+ * Custom toast wrapper with proper variant styling
+ */
+const toast = {
+    success: (message) => {
+        return sonnerToast.success(message);
+    },
+    error: (message) => {
+        return sonnerToast.error(message);
+    },
+    warning: (message) => {
+        return sonnerToast.warning(message);
+    },
+    info: (message) => {
+        return sonnerToast.info(message);
+    },
+    loading: (message) => {
+        return sonnerToast.loading(message);
+    },
+};
+export { toast };
+export { Toaster } from "./toaster";
+//# sourceMappingURL=index.js.map

package/dist/src/components/toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE9C;;GAEG;AACH,MAAM,KAAK,GAAG;IACb,OAAO,EAAE,CAAC,OAAe,EAAE,EAAE;QAC5B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IACD,KAAK,EAAE,CAAC,OAAe,EAAE,EAAE;QAC1B,OAAO,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IACnC,CAAC;IACD,OAAO,EAAE,CAAC,OAAe,EAAE,EAAE;QAC5B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IACD,IAAI,EAAE,CAAC,OAAe,EAAE,EAAE;QACzB,OAAO,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IACD,OAAO,EAAE,CAAC,OAAe,EAAE,EAAE;QAC5B,OAAO,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;CACD,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC"}

package/dist/src/components/toast/toaster.d.ts

@@ -0,0 +1,5 @@
+import { Toaster as Sonner } from "sonner";
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+declare const Toaster: ({ ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+export { Toaster };
+//# sourceMappingURL=toaster.d.ts.map

package/dist/src/components/toast/toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE3C,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AAExD,QAAA,MAAM,OAAO,GAAI,cAAc,YAAY,4CAqB1C,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/src/components/toast/toaster.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Toaster as Sonner } from "sonner";
+const Toaster = ({ ...props }) => {
+    return (_jsx(Sonner, { className: "toaster group", closeButton: true, toastOptions: {
+            classNames: {
+                toast: 'group toast group-[.toaster]:bg-popover group-[.toaster]:text-foreground group-[.toaster]:border data-[type=error]:!border-destructive data-[type=success]:!border-success data-[type=warning]:!border-warning data-[type=info]:!border-info data-[type=success]:[&_[data-icon]]:!text-success data-[type=error]:[&_[data-icon]]:!text-destructive data-[type=warning]:[&_[data-icon]]:!text-warning data-[type=info]:[&_[data-icon]]:!text-info',
+                description: 'group-[.toast]:text-muted-foreground',
+                actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground group-data-[type=success]:!bg-success group-data-[type=success]:!text-success-foreground group-data-[type=error]:!bg-destructive group-data-[type=error]:!text-destructive-foreground group-data-[type=warning]:!bg-warning group-data-[type=warning]:!text-warning-foreground group-data-[type=info]:!bg-info group-data-[type=info]:!text-info-foreground',
+                cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+                icon: 'group-[.toast]:!text-current',
+                closeButton: 'group-[.toast]:bg-popover group-[.toast]:border group-[.toast]:hover:bg-accent group-[.toast]:!left-auto group-[.toast]:!-right-4 group-[.toast]:!-top-1 group-data-[type=success]:!border-success group-data-[type=error]:!border-destructive group-data-[type=warning]:!border-warning group-data-[type=info]:!border-info',
+            },
+        }, ...props }));
+};
+export { Toaster };
+//# sourceMappingURL=toaster.js.map

package/dist/src/components/toast/toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.js","sourceRoot":"","sources":["../../../../src/components/toast/toaster.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAI3C,MAAM,OAAO,GAAG,CAAC,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IAC9C,OAAO,CACN,KAAC,MAAM,IACN,SAAS,EAAC,eAAe,EACzB,WAAW,QACR,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,KAAK,EACH,kbAAkb;gBACpb,WAAW,EAAE,sCAAsC;gBACnD,YAAY,EACV,8ZAA8Z;gBACha,YAAY,EAAE,8DAA8D;gBAC5E,IAAI,EAAE,8BAA8B;gBACpC,WAAW,EACT,8TAA8T;aACjU;SACF,KACA,KAAK,GACR,CACF,CAAC;AACH,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/src/components/toast/toaster.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toaster } from "./toaster";
+declare const meta: Meta<typeof Toaster>;
+export default meta;
+type Story = StoryObj<typeof Toaster>;
+export declare const Default: Story;
+export declare const Success: Story;
+export declare const ErrorToast: Story;
+export declare const VariantsWithActions: Story;
+//# sourceMappingURL=toaster.stories.d.ts.map

package/dist/src/components/toast/toaster.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/toaster.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAO9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAC;AAEtC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAgBxB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAgEjC,CAAC"}

package/dist/src/components/toast/toaster.stories.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toast } from "sonner";
+import { Button } from "../button";
+import { Toaster } from "./toaster";
+const meta = {
+    title: "Feedback/Toast",
+    component: Toaster,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+};
+export default meta;
+export const Default = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-4 items-center", children: [_jsx(Toaster, {}), _jsx(Button, { variant: "outline", onClick: () => toast("Event has been created", {
+                    description: "Sunday, December 03, 2023 at 9:00 AM",
+                    action: {
+                        label: "Undo",
+                        onClick: () => console.log("Undo"),
+                    },
+                }), children: "Show Toast" })] })),
+};
+export const Success = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-4 items-center", children: [_jsx(Toaster, {}), _jsx(Button, { variant: "outline", onClick: () => toast.success("Event has been created", {
+                    description: "Sunday, December 03, 2023 at 9:00 AM",
+                }), children: "Show Success Toast" })] })),
+};
+export const ErrorToast = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-4 items-center", children: [_jsx(Toaster, {}), _jsx(Button, { variant: "outline", onClick: () => toast.error("Event has not been created", {
+                    description: "Sunday, December 03, 2023 at 9:00 AM",
+                }), children: "Show Error Toast" })] })),
+};
+export const VariantsWithActions = {
+    render: () => (_jsxs("div", { className: "flex flex-col gap-4 items-center", children: [_jsx(Toaster, {}), _jsxs("div", { className: "flex gap-4", children: [_jsx(Button, { variant: "outline", onClick: () => toast.success("Project updated successfully", {
+                            description: "The changes have been saved to the server.",
+                            action: {
+                                label: "View Changes",
+                                onClick: () => console.log("View Changes"),
+                            },
+                        }), children: "Success with Action" }), _jsx(Button, { variant: "outline", onClick: () => toast.error("Failed to upload file", {
+                            description: "The file size exceeds the limit of 10MB.",
+                            action: {
+                                label: "Retry",
+                                onClick: () => console.log("Retry"),
+                            },
+                        }), children: "Error with Action" }), _jsx(Button, { variant: "outline", onClick: () => toast.warning("Storage almost full", {
+                            description: "You have used 90% of your available storage.",
+                            action: {
+                                label: "Upgrade",
+                                onClick: () => console.log("Upgrade"),
+                            },
+                        }), children: "Warning with Action" }), _jsx(Button, { variant: "outline", onClick: () => toast.info("New update available", {
+                            description: "Version 2.0 is now available for download.",
+                            action: {
+                                label: "Install",
+                                onClick: () => console.log("Install"),
+                            },
+                        }), children: "Info with Action" })] })] })),
+};
+//# sourceMappingURL=toaster.stories.js.map

package/dist/src/components/toast/toaster.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.stories.js","sourceRoot":"","sources":["../../../../src/components/toast/toaster.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/toast/toaster.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toaster.test.d.ts.map

package/dist/src/components/toast/toaster.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toaster.test.d.ts","sourceRoot":"","sources":["../../../../src/components/toast/toaster.test.tsx"],"names":[],"mappings":""}

package/dist/src/components/toast/toaster.test.js

@@ -0,0 +1,467 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+vi.mock("sonner", async () => {
+    const actual = (await vi.importActual("sonner"));
+    const toastMock = vi.fn(actual.toast);
+    Object.assign(toastMock, {
+        success: vi.fn(actual.toast.success),
+        error: vi.fn(actual.toast.error),
+        warning: vi.fn(actual.toast.warning),
+        info: vi.fn(actual.toast.info),
+        promise: vi.fn(actual.toast.promise),
+        dismiss: vi.fn(actual.toast.dismiss),
+        custom: vi.fn(actual.toast.custom),
+    });
+    return {
+        ...actual,
+        toast: toastMock,
+    };
+});
+import { toast } from "sonner";
+import { Toaster } from "./toaster";
+describe("Toaster", () => {
+    describe("Basic Rendering", () => {
+        it("renders toaster component", () => {
+            const { container } = render(_jsx(Toaster, {}));
+            // Sonner uses portals, just verify component renders
+            expect(container).toBeTruthy();
+        });
+        it("applies toaster className", () => {
+            const { container } = render(_jsx(Toaster, {}));
+            // Verify component renders with className prop
+            expect(container).toBeTruthy();
+        });
+        it("accepts custom props", () => {
+            const { container } = render(_jsx(Toaster, { position: "top-right" }));
+            expect(container).toBeTruthy();
+        });
+    });
+    describe("Toast Display", () => {
+        it("displays default toast", async () => {
+            render(_jsx(Toaster, {}));
+            toast("Test message");
+            await waitFor(() => {
+                expect(screen.getByText("Test message")).toBeInTheDocument();
+            });
+        });
+        it("displays toast with description", async () => {
+            render(_jsx(Toaster, {}));
+            toast("Test title", {
+                description: "Test description",
+            });
+            await waitFor(() => {
+                expect(screen.getByText("Test title")).toBeInTheDocument();
+                expect(screen.getByText("Test description")).toBeInTheDocument();
+            });
+        });
+        it("displays multiple toasts", async () => {
+            render(_jsx(Toaster, {}));
+            toast("First message");
+            toast("Second message");
+            toast("Third message");
+            await waitFor(() => {
+                expect(screen.getByText("First message")).toBeInTheDocument();
+                expect(screen.getByText("Second message")).toBeInTheDocument();
+                expect(screen.getByText("Third message")).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Toast Types", () => {
+        it("displays success toast", async () => {
+            render(_jsx(Toaster, {}));
+            toast.success("Success message");
+            await waitFor(() => {
+                const toastElement = screen
+                    .getByText("Success message")
+                    .closest(".toast");
+                expect(toastElement).toBeInTheDocument();
+                expect(toastElement).toHaveAttribute("data-type", "success");
+            });
+        });
+        it("displays error toast", async () => {
+            render(_jsx(Toaster, {}));
+            toast.error("Error message");
+            await waitFor(() => {
+                const toastElement = screen
+                    .getByText("Error message")
+                    .closest(".toast");
+                expect(toastElement).toBeInTheDocument();
+                expect(toastElement).toHaveAttribute("data-type", "error");
+            });
+        });
+        it("displays warning toast", async () => {
+            render(_jsx(Toaster, {}));
+            toast.warning("Warning message");
+            await waitFor(() => {
+                const toastElement = screen
+                    .getByText("Warning message")
+                    .closest(".toast");
+                expect(toastElement).toBeInTheDocument();
+                expect(toastElement).toHaveAttribute("data-type", "warning");
+            });
+        });
+        it("displays info toast", async () => {
+            render(_jsx(Toaster, {}));
+            toast.info("Info message");
+            await waitFor(() => {
+                const toastElement = screen.getByText("Info message").closest(".toast");
+                expect(toastElement).toBeInTheDocument();
+                expect(toastElement).toHaveAttribute("data-type", "info");
+            });
+        });
+    });
+    describe("Toast Styling", () => {
+        it("applies success toast styles", async () => {
+            render(_jsx(Toaster, {}));
+            toast.success("Success message", {
+                className: "custom-success-class",
+            });
+            expect(toast.success).toHaveBeenCalledWith("Success message", {
+                className: "custom-success-class",
+            });
+        });
+        it("applies error toast styles", async () => {
+            render(_jsx(Toaster, {}));
+            toast.error("Error message", {
+                className: "custom-error-class",
+            });
+            expect(toast.error).toHaveBeenCalledWith("Error message", {
+                className: "custom-error-class",
+            });
+        });
+        it("applies warning toast styles", async () => {
+            render(_jsx(Toaster, {}));
+            toast.warning("Warning message", {
+                className: "custom-warning-class",
+            });
+            expect(toast.warning).toHaveBeenCalledWith("Warning message", {
+                className: "custom-warning-class",
+            });
+        });
+        it("applies info toast styles", async () => {
+            render(_jsx(Toaster, {}));
+            toast.info("Info message", {
+                className: "custom-info-class",
+            });
+            expect(toast.info).toHaveBeenCalledWith("Info message", {
+                className: "custom-info-class",
+            });
+        });
+    });
+    describe("Toast Actions", () => {
+        it("displays action button", async () => {
+            render(_jsx(Toaster, {}));
+            toast("Message with action", {
+                action: {
+                    label: "Undo",
+                    onClick: vi.fn(),
+                },
+            });
+            await waitFor(() => {
+                expect(screen.getByText("Undo")).toBeInTheDocument();
+            });
+        });
+        it("calls action onClick", async () => {
+            const user = userEvent.setup();
+            const onClick = vi.fn();
+            render(_jsx(Toaster, {}));
+            toast("Message with action", {
+                action: {
+                    label: "Undo",
+                    onClick,
+                },
+            });
+            await waitFor(() => {
+                expect(screen.getByText("Undo")).toBeInTheDocument();
+            });
+            await user.click(screen.getByText("Undo"));
+            expect(onClick).toHaveBeenCalled();
+        });
+        it("applies action button styles", async () => {
+            render(_jsx(Toaster, {}));
+            toast("Message", {
+                action: {
+                    label: "Action",
+                    onClick: vi.fn(),
+                },
+            });
+            await waitFor(() => {
+                const actionButton = screen.getByText("Action");
+                expect(actionButton).toHaveClass("group-[.toast]:bg-primary");
+            });
+        });
+        it("applies action button status styles", async () => {
+            render(_jsx(Toaster, {}));
+            toast.success("Success message", {
+                action: {
+                    label: "Success Action",
+                    onClick: vi.fn(),
+                },
+            });
+            await waitFor(() => {
+                const actionButton = screen.getByText("Success Action");
+                expect(actionButton).toHaveClass("group-data-[type=success]:!bg-success");
+            });
+        });
+        it("displays cancel button", async () => {
+            render(_jsx(Toaster, {}));
+            toast("Message with cancel", {
+                cancel: {
+                    label: "Cancel",
+                    onClick: vi.fn(),
+                },
+            });
+            await waitFor(() => {
+                expect(screen.getByText("Cancel")).toBeInTheDocument();
+            });
+        });
+        it("applies cancel button styles", async () => {
+            render(_jsx(Toaster, {}));
+            toast("Message", {
+                cancel: {
+                    label: "Cancel",
+                    onClick: vi.fn(),
+                },
+            });
+            await waitFor(() => {
+                const cancelButton = screen.getByText("Cancel");
+                expect(cancelButton).toHaveClass("group-[.toast]:bg-muted");
+            });
+        });
+    });
+    describe("Toast Dismissal", () => {
+        it("applies close button status styles", async () => {
+            render(_jsx(Toaster, { closeButton: true }));
+            toast.error("Error message");
+            await waitFor(() => {
+                const closeButton = screen.getByRole("button", { name: /close/i });
+                expect(closeButton).toHaveClass("group-data-[type=error]:!border-destructive");
+            });
+        });
+        it("dismisses toast automatically", async () => {
+            render(_jsx(Toaster, { duration: 100 }));
+            toast("Auto dismiss");
+            await waitFor(() => {
+                expect(screen.getByText("Auto dismiss")).toBeInTheDocument();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText("Auto dismiss")).not.toBeInTheDocument();
+            }, { timeout: 500 });
+        });
+        it("dismisses toast manually", async () => {
+            render(_jsx(Toaster, {}));
+            const id = toast("Manual dismiss");
+            await waitFor(() => {
+                expect(screen.getByText("Manual dismiss")).toBeInTheDocument();
+            });
+            toast.dismiss(id);
+            await waitFor(() => {
+                expect(screen.queryByText("Manual dismiss")).not.toBeInTheDocument();
+            });
+        });
+        it("has close button", async () => {
+            render(_jsx(Toaster, { closeButton: true }));
+            toast("With close button");
+            await waitFor(() => {
+                expect(screen.getByText("With close button")).toBeInTheDocument();
+                // Sonner adds a close button with aria-label
+                const closeButton = screen.getByRole("button", { name: /close/i });
+                expect(closeButton).toBeInTheDocument();
+            });
+        });
+        it("dismisses toast via close button", async () => {
+            const user = userEvent.setup();
+            render(_jsx(Toaster, { closeButton: true }));
+            toast("Dismissible toast");
+            await waitFor(() => {
+                expect(screen.getByText("Dismissible toast")).toBeInTheDocument();
+            });
+            const closeButton = screen.getByRole("button", { name: /close/i });
+            await user.click(closeButton);
+            await waitFor(() => {
+                expect(screen.queryByText("Dismissible toast")).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe("Toast Position", () => {
+        it("supports top-left position", () => {
+            const { container } = render(_jsx(Toaster, { position: "top-left" }));
+            // Sonner uses portals, just verify it renders without error
+            expect(container).toBeTruthy();
+        });
+        it("supports top-center position", () => {
+            const { container } = render(_jsx(Toaster, { position: "top-center" }));
+            expect(container).toBeTruthy();
+        });
+        it("supports top-right position", () => {
+            const { container } = render(_jsx(Toaster, { position: "top-right" }));
+            expect(container).toBeTruthy();
+        });
+        it("supports bottom-left position", () => {
+            const { container } = render(_jsx(Toaster, { position: "bottom-left" }));
+            expect(container).toBeTruthy();
+        });
+        it("supports bottom-center position", () => {
+            const { container } = render(_jsx(Toaster, { position: "bottom-center" }));
+            expect(container).toBeTruthy();
+        });
+        it("supports bottom-right position", () => {
+            const { container } = render(_jsx(Toaster, { position: "bottom-right" }));
+            expect(container).toBeTruthy();
+        });
+    });
+    describe("Toast Duration", () => {
+        it("uses default duration", async () => {
+            render(_jsx(Toaster, {}));
+            toast("Default duration");
+            await waitFor(() => {
+                expect(screen.getByText("Default duration")).toBeInTheDocument();
+            });
+        });
+        it("supports custom duration", async () => {
+            render(_jsx(Toaster, { duration: 500 }));
+            toast("Custom duration");
+            await waitFor(() => {
+                expect(screen.getByText("Custom duration")).toBeInTheDocument();
+            });
+        });
+        it("supports infinite duration", async () => {
+            render(_jsx(Toaster, { duration: Infinity }));
+            toast("Infinite duration");
+            await waitFor(() => {
+                expect(screen.getByText("Infinite duration")).toBeInTheDocument();
+            });
+            // Should still be visible after a delay
+            await new Promise((resolve) => setTimeout(resolve, 200));
+            expect(screen.getByText("Infinite duration")).toBeInTheDocument();
+        });
+        it("supports per-toast duration", async () => {
+            render(_jsx(Toaster, {}));
+            toast("Custom toast duration", { duration: 100 });
+            await waitFor(() => {
+                expect(screen.getByText("Custom toast duration")).toBeInTheDocument();
+            });
+            await waitFor(() => {
+                expect(screen.queryByText("Custom toast duration")).not.toBeInTheDocument();
+            }, { timeout: 500 });
+        });
+    });
+    describe("Toast Configuration", () => {
+        it("supports expand option", () => {
+            const { container } = render(_jsx(Toaster, { expand: true }));
+            expect(container).toBeTruthy();
+        });
+        it("supports visibleToasts limit", () => {
+            const { container } = render(_jsx(Toaster, { visibleToasts: 3 }));
+            expect(container).toBeTruthy();
+        });
+        it("supports richColors", () => {
+            const { container } = render(_jsx(Toaster, { richColors: true }));
+            expect(container).toBeTruthy();
+        });
+    });
+    describe("Promise Toast", () => {
+        it("handles promise toast states", async () => {
+            render(_jsx(Toaster, {}));
+            const promise = new Promise((resolve) => setTimeout(resolve, 100));
+            toast.promise(promise, {
+                loading: "Loading...",
+                success: "Success!",
+                error: "Error!",
+            });
+            await waitFor(() => {
+                expect(screen.getByText("Loading...")).toBeInTheDocument();
+            });
+            await waitFor(() => {
+                expect(screen.getByText("Success!")).toBeInTheDocument();
+            }, { timeout: 200 });
+        });
+        it("handles promise rejection", async () => {
+            render(_jsx(Toaster, {}));
+            const promise = new Promise((_, reject) => setTimeout(() => reject("Failed"), 100));
+            toast.promise(promise, {
+                loading: "Loading...",
+                success: "Success!",
+                error: "Error occurred",
+            });
+            await waitFor(() => {
+                expect(screen.getByText("Loading...")).toBeInTheDocument();
+            });
+            await waitFor(() => {
+                expect(screen.getByText("Error occurred")).toBeInTheDocument();
+            }, { timeout: 200 });
+        });
+    });
+    describe("Custom Toast", () => {
+        it("displays custom JSX content", async () => {
+            render(_jsx(Toaster, {}));
+            toast.custom(() => _jsx("div", { "data-testid": "custom-toast", children: "Custom content" }));
+            await waitFor(() => {
+                expect(screen.getByTestId("custom-toast")).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Accessibility", () => {
+        it("has proper ARIA attributes", async () => {
+            render(_jsx(Toaster, {}));
+            toast("Accessible toast");
+            await waitFor(() => {
+                const toastElement = screen.getByText("Accessible toast");
+                // Sonner wraps toasts in a section with aria-live
+                expect(toastElement).toBeInTheDocument();
+            });
+        });
+        it("supports screen readers", async () => {
+            render(_jsx(Toaster, {}));
+            toast("Screen reader announcement");
+            await waitFor(() => {
+                const announcement = screen.getByText("Screen reader announcement");
+                expect(announcement).toBeInTheDocument();
+            });
+        });
+    });
+    describe("Edge Cases", () => {
+        it("handles empty message", async () => {
+            render(_jsx(Toaster, {}));
+            toast("");
+            // Should still render the toast container
+            await waitFor(() => {
+                const toaster = document.querySelector(".toaster");
+                expect(toaster).toBeInTheDocument();
+            });
+        });
+        it("handles very long messages", async () => {
+            render(_jsx(Toaster, {}));
+            const longMessage = "A".repeat(500);
+            toast(longMessage);
+            await waitFor(() => {
+                expect(screen.getByText(longMessage)).toBeInTheDocument();
+            });
+        });
+        it("handles rapid toast creation", async () => {
+            render(_jsx(Toaster, {}));
+            for (let i = 0; i < 10; i++) {
+                toast(`Toast ${i}`);
+            }
+            // Should handle multiple toasts
+            await waitFor(() => {
+                expect(screen.getByText("Toast 0")).toBeInTheDocument();
+            });
+        });
+        it("handles toast update", async () => {
+            render(_jsx(Toaster, {}));
+            const id = toast("Initial message");
+            await waitFor(() => {
+                expect(screen.getByText("Initial message")).toBeInTheDocument();
+            });
+            toast("Updated message", { id });
+            await waitFor(() => {
+                expect(screen.getByText("Updated message")).toBeInTheDocument();
+                expect(screen.queryByText("Initial message")).not.toBeInTheDocument();
+            });
+        });
+    });
+});
+//# sourceMappingURL=toaster.test.js.map