├── src
    ├── routes
    │   ├── +layout.ts
    │   ├── +layout.svelte
    │   └── +page.svelte
    ├── lib
    │   ├── CodeBlock
    │   │   ├── index.ts
    │   │   ├── CodeBlock.svelte
    │   │   └── Copy.svelte
    │   ├── usage-code.svelte
    │   ├── RichContent.svelte
    │   ├── Examples.svelte
    │   ├── ChangePositionExamples.svelte
    │   └── examples.ts
    ├── svelte-hot-french-toast
    │   ├── components
    │   │   ├── icons
    │   │   │   ├── index.ts
    │   │   │   ├── IconLoading.svelte
    │   │   │   ├── IconSuccess.svelte
    │   │   │   ├── IconError.svelte
    │   │   │   ├── IconInfo.svelte
    │   │   │   └── IconWarning.svelte
    │   │   ├── ToastMessage.svelte
    │   │   ├── Toaster.svelte
    │   │   ├── ToastIcon.svelte
    │   │   ├── ToastWrapper.svelte
    │   │   └── ToastBar.svelte
    │   ├── core
    │   │   ├── utils.ts
    │   │   ├── useToaster.svelte.ts
    │   │   ├── types.ts
    │   │   ├── toast.ts
    │   │   └── state.svelte.ts
    │   └── index.ts
    ├── app.css
    └── app.html
├── .npmrc
├── pnpm-workspace.yaml
├── header-image.png
├── static
    ├── favicon.png
    ├── og-image.png
    └── fonts
    │   ├── jost-latin-wght-normal.woff2
    │   └── jetbrains-mono-latin-wght-normal.woff2
├── .gitignore
├── README-DEV.md
├── vite.config.js
├── tsconfig.json
├── svelte.config.js
├── prettier.config.js
├── eslint.config.js
├── LICENSE
├── CHANGELOG.md
├── README.md
└── package.json


/src/routes/+layout.ts:
--------------------------------------------------------------------------------
1 | export const prerender = true
2 | 


--------------------------------------------------------------------------------
/src/lib/CodeBlock/index.ts:
--------------------------------------------------------------------------------
1 | export { default as CodeBlock } from "./CodeBlock.svelte"
2 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | package-lock=false
3 | prefer-offline=true
4 | save-exact=true
5 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | onlyBuiltDependencies:
2 |     - "@tailwindcss/oxide"
3 |     - esbuild
4 | 


--------------------------------------------------------------------------------
/header-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/babakfp/svelte-hot-french-toast/HEAD/header-image.png


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/babakfp/svelte-hot-french-toast/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/static/og-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/babakfp/svelte-hot-french-toast/HEAD/static/og-image.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | /node_modules/
3 | /.svelte-kit/
4 | /dist/
5 | /build/
6 | /vite.config.*.timestamp-*
7 | 


--------------------------------------------------------------------------------
/static/fonts/jost-latin-wght-normal.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/babakfp/svelte-hot-french-toast/HEAD/static/fonts/jost-latin-wght-normal.woff2


--------------------------------------------------------------------------------
/static/fonts/jetbrains-mono-latin-wght-normal.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/babakfp/svelte-hot-french-toast/HEAD/static/fonts/jetbrains-mono-latin-wght-normal.woff2


--------------------------------------------------------------------------------
/README-DEV.md:
--------------------------------------------------------------------------------
1 | Up to date with [Svelte French Toast](https://github.com/kbrgl/svelte-french-toast) until Jun 26, 2025 commit. SHA: `ac3a4dfb03735b62cf08615da48f93cb7a80647a`.
2 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
1 | import { sveltekit } from "@sveltejs/kit/vite"
2 | import tailwindcss from "@tailwindcss/vite"
3 | import { defineConfig } from "vite"
4 | 
5 | export default defineConfig({
6 |     plugins: [tailwindcss(), sveltekit()],
7 | })
8 | 


--------------------------------------------------------------------------------
/src/lib/usage-code.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import toast, { Toaster } from "svelte-hot-french-toast"
 3 | 
 4 |     const makeToast = () => {
 5 |         toast.success("Hello, World!")
 6 |     }
 7 | </script>
 8 | 
 9 | <Toaster />
10 | 
11 | <button onclick={makeToast}>Toast</button>
12 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/components/icons/index.ts:
--------------------------------------------------------------------------------
1 | export { default as IconError } from "./IconError.svelte"
2 | export { default as IconInfo } from "./IconInfo.svelte"
3 | export { default as IconLoading } from "./IconLoading.svelte"
4 | export { default as IconSuccess } from "./IconSuccess.svelte"
5 | export { default as IconWarning } from "./IconWarning.svelte"
6 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "extends": "./.svelte-kit/tsconfig.json",
 3 |     "compilerOptions": {
 4 |         "allowJs": true,
 5 |         "checkJs": true,
 6 |         "esModuleInterop": true,
 7 |         "forceConsistentCasingInFileNames": true,
 8 |         "resolveJsonModule": true,
 9 |         "skipLibCheck": true,
10 |         "sourceMap": true,
11 |         "strict": true
12 |     }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/lib/RichContent.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import toast_, { type Toast } from "svelte-hot-french-toast"
 3 | 
 4 |     let {
 5 |         toast,
 6 |         myText,
 7 |     }: {
 8 |         toast: Toast
 9 |         myText: string
10 |     } = $props()
11 | </script>
12 | 
13 | <span>
14 |     Custom and <b>{myText}</b>
15 |     <button onclick={() => toast_.dismiss(toast.id)}>Dismiss</button>
16 | </span>
17 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from "@sveltejs/adapter-static"
 2 | import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
 3 | 
 4 | /** @type {import("@sveltejs/kit").Config} */
 5 | export default {
 6 |     kit: {
 7 |         adapter: adapter(),
 8 |         alias: {
 9 |             "svelte-hot-french-toast": "src/svelte-hot-french-toast/index.ts",
10 |         },
11 |     },
12 |     preprocess: vitePreprocess(),
13 | }
14 | 


--------------------------------------------------------------------------------
/src/lib/CodeBlock/CodeBlock.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { codeToHtml, type BundledLanguage } from "shiki"
 3 |     import Copy from "./Copy.svelte"
 4 | 
 5 |     let { code, lang }: { code: string; lang: BundledLanguage } = $props()
 6 | 
 7 |     const htmlPromise = codeToHtml(code, { lang, theme: "github-dark-dimmed" })
 8 | </script>
 9 | 
10 | {#await htmlPromise}
11 |     <p>Loading...</p>
12 | {:then html}
13 |     <div class="group relative">
14 |         {@html html}
15 |         <Copy text={code} />
16 |     </div>
17 | {:catch error}
18 |     <p>{error}</p>
19 | {/await}
20 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/core/utils.ts:
--------------------------------------------------------------------------------
 1 | export const genId = (() => {
 2 |     let count = 0
 3 | 
 4 |     return () => {
 5 |         count += 1
 6 |         return count.toString()
 7 |     }
 8 | })()
 9 | 
10 | export const prefersReducedMotion = (() => {
11 |     // Cache result
12 |     let shouldReduceMotion: boolean | undefined
13 | 
14 |     return () => {
15 |         if (shouldReduceMotion === undefined && typeof window !== "undefined") {
16 |             const mediaQuery = matchMedia("(prefers-reduced-motion: reduce)")
17 |             shouldReduceMotion = !mediaQuery || mediaQuery.matches
18 |         }
19 |         return shouldReduceMotion
20 |     }
21 | })()
22 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import("prettier").Config & import("prettier-plugin-svelte").PluginConfig & import("@ianvs/prettier-plugin-sort-imports").PluginConfig} */
 2 | export default {
 3 |     semi: false,
 4 |     tabWidth: 4,
 5 |     htmlWhitespaceSensitivity: "ignore",
 6 |     experimentalTernaries: true,
 7 |     experimentalOperatorPosition: "start",
 8 |     plugins: [
 9 |         "prettier-plugin-svelte",
10 |         "@ianvs/prettier-plugin-sort-imports",
11 |         "prettier-plugin-tailwindcss",
12 |     ],
13 |     importOrder: [
14 |         "^@",
15 |         "<THIRD_PARTY_MODULES>",
16 |         "^\\$(?!lib/)",
17 |         "^\\$lib/",
18 |         "^[.]",
19 |     ],
20 | }
21 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/components/ToastMessage.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import type { Toast } from "../core/types"
 3 | 
 4 |     let {
 5 |         toast,
 6 |     }: {
 7 |         toast: Toast
 8 |     } = $props()
 9 | </script>
10 | 
11 | <div class="svelte-hot-french-toast__message" {...toast.ariaProps}>
12 |     {#if typeof toast.message === "string"}
13 |         {toast.message}
14 |     {:else}
15 |         <toast.message {toast} {...toast.props} />
16 |     {/if}
17 | </div>
18 | 
19 | <style>
20 |     .svelte-hot-french-toast__message {
21 |         display: flex;
22 |         justify-content: center;
23 |         margin: 4px 10px;
24 |         color: inherit;
25 |         flex: 1 1 auto;
26 |         white-space: pre-line;
27 |     }
28 | </style>
29 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/index.ts:
--------------------------------------------------------------------------------
 1 | import toast from "./core/toast"
 2 | 
 3 | export type {
 4 |     ToastOptions,
 5 |     ToastPosition,
 6 |     Toast,
 7 |     Renderable,
 8 |     ValueOrFunction,
 9 |     DefaultToastOptions,
10 |     PromiseToastOptions,
11 |     IconTheme,
12 |     ToastType,
13 |     ValueFunction,
14 | } from "./core/types"
15 | 
16 | export { default as useToaster } from "./core/useToaster.svelte"
17 | export { useToasterState } from "./core/state.svelte"
18 | export { default as ToastBar } from "./components/ToastBar.svelte"
19 | export { default as ToastIcon } from "./components/ToastIcon.svelte"
20 | export { default as Toaster } from "./components/Toaster.svelte"
21 | export * from "./components/icons"
22 | export { resolveValue } from "./core/types"
23 | 
24 | export { toast }
25 | export default toast
26 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/components/icons/IconLoading.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import type { IconTheme } from "../../core/types"
 3 | 
 4 |     let { primary, secondary }: Partial<IconTheme> = $props()
 5 | </script>
 6 | 
 7 | <div style:--primary={primary} style:--secondary={secondary}></div>
 8 | 
 9 | <style>
10 |     div {
11 |         width: 12px;
12 |         height: 12px;
13 |         box-sizing: border-box;
14 |         border: 2px solid;
15 |         border-radius: 100%;
16 |         border-color: var(--secondary, #e0e0e0);
17 |         border-inline-end-color: var(--primary, #616161);
18 |         animation: rotate 1s linear infinite;
19 |     }
20 | 
21 |     @keyframes rotate {
22 |         from {
23 |             transform: rotate(0deg);
24 |         }
25 |         to {
26 |             transform: rotate(360deg);
27 |         }
28 |     }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/src/lib/CodeBlock/Copy.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import IconCopySimpleFill from "phosphor-icons-svelte/IconCopySimpleFill.svelte"
 3 |     import toast from "svelte-hot-french-toast"
 4 | 
 5 |     let {
 6 |         text,
 7 |     }: {
 8 |         text: string
 9 |     } = $props()
10 | 
11 |     const copy = (text: string) => {
12 |         const promise = navigator.clipboard.writeText(text)
13 |         toast.promise(promise, {
14 |             loading: "Copying...",
15 |             success: "Copied!",
16 |             error: "Could not copy!",
17 |         })
18 |     }
19 | </script>
20 | 
21 | <button
22 |     class="invisible absolute top-0 -right-4 flex bg-white/10 p-2 text-white group-[&:focus-within]:visible group-[&:hover]:visible hover:bg-white/15 sm:top-2 sm:right-2 sm:rounded-md"
23 |     onclick={() => copy(text)}
24 | >
25 |     <IconCopySimpleFill />
26 | </button>
27 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from "@eslint/js"
 2 | import prettier from "eslint-config-prettier"
 3 | import svelte from "eslint-plugin-svelte"
 4 | import globals from "globals"
 5 | import ts from "typescript-eslint"
 6 | 
 7 | export default ts.config(
 8 |     js.configs.recommended,
 9 |     ...ts.configs.recommended,
10 |     ...svelte.configs["flat/recommended"],
11 |     prettier,
12 |     ...svelte.configs["flat/prettier"],
13 |     {
14 |         languageOptions: {
15 |             globals: {
16 |                 ...globals.browser,
17 |                 ...globals.node,
18 |             },
19 |         },
20 |         rules: {
21 |             "svelte/no-at-html-tags": "off",
22 |         },
23 |     },
24 |     {
25 |         files: ["**/*.svelte"],
26 |         languageOptions: {
27 |             parserOptions: {
28 |                 parser: ts.parser,
29 |             },
30 |         },
31 |     },
32 |     {
33 |         ignores: ["build/", ".svelte-kit/", "dist/"],
34 |     },
35 | )
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 babakfp
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ## 4.0.0
 2 | 
 3 | - fix!: change `keepAfterSesolutionOrRejection` to `keepAfterResolutionOrRejection`.
 4 | 
 5 | ## 3.1.0
 6 | 
 7 | - feat: add `keepAfterSesolutionOrRejection` option to `toast.promise()`.
 8 | 
 9 | ## 3.0.0
10 | 
11 | ### Breaking
12 | 
13 | - fix: [#1](https://github.com/kbrgl/svelte-french-toast/issues/1) by adding `svelte-hot-french-toast__` prefix to all classes.
14 | 
15 | ## 2.0.0
16 | 
17 | ### Breaking
18 | 
19 | - Rename `useToasterStore` to `useToasterState`.
20 | 
21 | ### Features
22 | 
23 | - Add Warning and Info Toasts. https://github.com/kbrgl/svelte-french-toast/issues/92.
24 | 
25 | ### Fixes
26 | 
27 | - When toast content height changes, change toast height accordingly. https://github.com/kbrgl/svelte-french-toast/pull/75.
28 | 
29 | ## 1.0.0
30 | 
31 | Migration from [Svelte French Toast](https://github.com/kbrgl/svelte-french-toast):
32 | 
33 | - [breaking]: Svelte 5 only.
34 | - [breaking]: Uses runes instead of stores.
35 | - [breaking]: `className` prop renamed to `class`.
36 | - [breaking]: `containerClassName` prop renamed to `containerClass`.
37 | - [breaking]: Rename `startPause` to `pause` and `endPause` to `resume`.
38 | - [breaking]: Removed non-logical positions:
39 |     - `"top-left"`
40 |     - `"top-right"`
41 |     - `"bottom-left"`
42 |     - `"bottom-right"`
43 | - [breaking]: Converted `interface` to `type`.
44 | - [breaking]: Possibly some other breaking changes.
45 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <img src="header-image.png" />
 2 | 
 3 | # Svelte Hot French Toast
 4 | 
 5 | Buttery smooth toast notifications for Svelte 5. Lightweight, customizable, and beautiful by default.
 6 | 
 7 | - [Demo](https://svelte-hot-french-toast.vercel.app)
 8 | - [CHANGELOG](https://github.com/babakfp/svelte-hot-french-toast/blob/main/CHANGELOG.md)
 9 | - [NPM](https://www.npmjs.com/package/svelte-hot-french-toast)
10 | - [GitHub](https://github.com/babakfp/svelte-hot-french-toast)
11 | 
12 | > [!IMPORTANT]
13 | > This is only compatible with Svelte 5. If you're using Svelte 4, please use a compatible version of [Svelte French Toast](https://github.com/kbrgl/svelte-french-toast).
14 | 
15 | ## Installation
16 | 
17 | ```bash
18 | pnpm add -D svelte-hot-french-toast
19 | ```
20 | 
21 | ## Usage
22 | 
23 | ```svelte
24 | <script lang="ts">
25 |     import toast, { Toaster } from "svelte-hot-french-toast"
26 | 
27 |     const makeToast = () => {
28 |         toast.success("Hello, World!")
29 |     }
30 | </script>
31 | 
32 | <Toaster />
33 | 
34 | <button onclick={makeToast}>Toast</button>
35 | ```
36 | 
37 | [More examples](https://svelte-hot-french-toast.vercel.app).
38 | 
39 | ## About
40 | 
41 | I created this because the original project [Svelte French Toast](https://github.com/kbrgl/svelte-french-toast) wasn't compatible with Svelte 5 and my changes were possibly not going to be merged.
42 | 
43 | ### Thanks
44 | 
45 | - Thanks to [React Hot Toast](https://github.com/timolins/react-hot-toast) and its contributors.
46 | - Thanks to [Svelte French Toast](https://github.com/kbrgl/svelte-french-toast) and its contributors.
47 | 


--------------------------------------------------------------------------------
/src/routes/+layout.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import "../app.css"
 3 | 
 4 |     let { children } = $props()
 5 | </script>
 6 | 
 7 | <svelte:head>
 8 |     <title>Svelte Hot French Toast</title>
 9 |     <meta name="title" content="Svelte Hot French Toast" />
10 |     <meta
11 |         name="description"
12 |         content="Buttery smooth toast notifications for Svelte 5. Lightweight, customizable, and beautiful by default."
13 |     />
14 | 
15 |     <!-- Open Graph / Facebook -->
16 |     <meta property="og:type" content="website" />
17 |     <meta
18 |         property="og:url"
19 |         content="https://svelte-hot-french-toast.vercel.app"
20 |     />
21 |     <meta property="og:title" content="Svelte Hot French Toast" />
22 |     <meta
23 |         property="og:description"
24 |         content="Buttery smooth toast notifications for Svelte 5. Lightweight, customizable, and beautiful by default."
25 |     />
26 |     <meta
27 |         property="og:image"
28 |         content="https://svelte-hot-french-toast.vercel.app/og-image.png"
29 |     />
30 | 
31 |     <!-- Twitter -->
32 |     <meta property="twitter:card" content="summary_large_image" />
33 |     <meta
34 |         property="twitter:url"
35 |         content="https://svelte-hot-french-toast.vercel.app/"
36 |     />
37 |     <meta property="twitter:title" content="Svelte Hot French Toast" />
38 |     <meta
39 |         property="twitter:description"
40 |         content="Buttery smooth toast notifications for Svelte 5. Lightweight, customizable, and beautiful by default."
41 |     />
42 |     <meta
43 |         property="twitter:image"
44 |         content="https://svelte-hot-french-toast.vercel.app/og-image.png"
45 |     />
46 | </svelte:head>
47 | 
48 | {@render children?.()}
49 | 


--------------------------------------------------------------------------------
/src/lib/Examples.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { CodeBlock } from "./CodeBlock"
 3 |     import examples from "./examples"
 4 | 
 5 |     let selected = $state("Success")
 6 | </script>
 7 | 
 8 | <div class="mb-5 grid grid-cols-2 gap-4 rounded-xl md:grid-cols-3">
 9 |     {#each examples as example (example.title)}
10 |         <label
11 |             for={example.title}
12 |             class={[
13 |                 "rounded-xl border-2 border-transparent bg-gray-200 p-2 transition-colors hover:border-blue-500",
14 |                 { "border-blue-500 font-bold": example.title === selected },
15 |             ]}
16 |         >
17 |             <input
18 |                 class="appearance-none"
19 |                 type="radio"
20 |                 id={example.title}
21 |                 name="examples"
22 |                 value={example.title}
23 |                 onclick={() => {
24 |                     example.action()
25 |                 }}
26 |                 bind:group={selected}
27 |             />
28 |             <span class="mr-1">{example.emoji}</span>
29 |             <span class="font-medium">{example.title}</span>
30 |         </label>
31 |     {/each}
32 | </div>
33 | {#each examples as example}
34 |     <div class="space-y-4" class:hidden={example.title !== selected}>
35 |         {#if Array.isArray(example.snippet)}
36 |             {#each example.snippet as snippet}
37 |                 <div>
38 |                     <CodeBlock code={snippet.code} lang={snippet.lang} />
39 |                 </div>
40 |             {/each}
41 |         {:else}
42 |             <CodeBlock
43 |                 code={example.snippet.code}
44 |                 lang={example.snippet.lang}
45 |             />
46 |         {/if}
47 |     </div>
48 | {/each}
49 | 


--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
 1 | @import "tailwindcss";
 2 | @import "tailwindcss-addons";
 3 | 
 4 | @theme {
 5 |     /* --color-black: initial; */
 6 |     /* --color-white: initial; */
 7 |     --color-zinc-*: initial;
 8 |     --color-slate-*: initial;
 9 |     --color-stone-*: initial;
10 |     --color-neutral-*: initial;
11 | 
12 |     --color-gray-50: oklch(0.985 0 0); /* --color-neutral-50 */
13 |     --color-gray-100: oklch(0.97 0 0); /* --color-neutral-100 */
14 |     --color-gray-200: oklch(0.922 0 0); /* --color-neutral-200 */
15 |     --color-gray-300: oklch(0.87 0 0); /* --color-neutral-300 */
16 |     --color-gray-400: oklch(0.708 0 0); /* --color-neutral-400 */
17 |     --color-gray-500: oklch(0.556 0 0); /* --color-neutral-500 */
18 |     --color-gray-600: oklch(0.439 0 0); /* --color-neutral-600 */
19 |     --color-gray-700: oklch(0.371 0 0); /* --color-neutral-700 */
20 |     --color-gray-800: oklch(0.269 0 0); /* --color-neutral-800 */
21 |     --color-gray-900: oklch(0.205 0 0); /* --color-neutral-900 */
22 |     --color-gray-950: oklch(0.145 0 0); /* --color-neutral-950 */
23 | 
24 |     --color-background: oklch(0.97 0 0); /* --color-neutral-100 */
25 |     --color-foreground: oklch(0.205 0 0); /* --color-neutral-900 */
26 | 
27 |     --radius-lg: initial;
28 |     --radius: 0.5rem; /* --radius-lg */
29 | 
30 |     --font-sans: "Jost Variable";
31 |     --font-mono: "JetBrains Mono Variable";
32 |     --font-mono--font-variation-settings: "MONO" 1;
33 | }
34 | 
35 | @utility container {
36 |     @apply mx-auto max-w-screen-xl px-4;
37 | }
38 | 
39 | @layer base {
40 |     * {
41 |         @apply drag-none scrollbar-none [outline:transparent];
42 |     }
43 | }
44 | 
45 | pre {
46 |     @apply -mx-4 block overflow-x-auto p-4 select-text selection:bg-white/10 sm:mx-0 sm:rounded-xl sm:p-6;
47 | }
48 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/components/icons/IconSuccess.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import type { IconTheme } from "../../core/types"
 3 | 
 4 |     let { primary, secondary }: Partial<IconTheme> = $props()
 5 | </script>
 6 | 
 7 | <div style:--primary={primary} style:--secondary={secondary}></div>
 8 | 
 9 | <style>
10 |     div {
11 |         width: 20px;
12 |         opacity: 0;
13 |         height: 20px;
14 |         border-radius: 10px;
15 |         background: var(--primary, #61d345);
16 |         position: relative;
17 |         transform: rotate(45deg);
18 |         animation: circle-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
19 |             forwards;
20 |         animation-delay: 100ms;
21 |     }
22 | 
23 |     div::after {
24 |         content: "";
25 |         box-sizing: border-box;
26 |         animation: checkmark-animation 0.2s ease-out forwards;
27 |         opacity: 0;
28 |         animation-delay: 200ms;
29 |         position: absolute;
30 |         border-inline-end: 2px solid;
31 |         border-bottom: 2px solid;
32 |         border-color: var(--secondary, #fff);
33 |         bottom: 6px;
34 |         inset-inline-start: 6px;
35 |         height: 10px;
36 |         width: 6px;
37 |     }
38 | 
39 |     @keyframes circle-animation {
40 |         from {
41 |             transform: scale(0) rotate(45deg);
42 |             opacity: 0;
43 |         }
44 |         to {
45 |             transform: scale(1) rotate(45deg);
46 |             opacity: 1;
47 |         }
48 |     }
49 | 
50 |     @keyframes checkmark-animation {
51 |         0% {
52 |             height: 0;
53 |             width: 0;
54 |             opacity: 0;
55 |         }
56 |         40% {
57 |             height: 0;
58 |             width: 6px;
59 |             opacity: 1;
60 |         }
61 |         100% {
62 |             opacity: 1;
63 |             height: 10px;
64 |         }
65 |     }
66 | </style>
67 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/components/Toaster.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import type { Snippet } from "svelte"
 3 |     import type { DOMToast, ToastOptions, ToastPosition } from "../core/types"
 4 |     import useToaster from "../core/useToaster.svelte"
 5 |     import ToastWrapper from "./ToastWrapper.svelte"
 6 | 
 7 |     let {
 8 |         reverseOrder,
 9 |         position = "top-center",
10 |         toastOptions,
11 |         gutter = 8,
12 |         style,
13 |         class: class_,
14 |         children,
15 |     }: {
16 |         reverseOrder?: boolean
17 |         position?: ToastPosition
18 |         toastOptions?: ToastOptions
19 |         gutter?: number
20 |         style?: string
21 |         class?: string
22 |         children?: Snippet<[{ toasts: DOMToast[] }]>
23 |     } = $props()
24 | 
25 |     const toaster = useToaster(toastOptions)
26 | 
27 |     const toasts: DOMToast[] = $derived(
28 |         toaster.toasts.map((toast) => ({
29 |             ...toast,
30 |             position: toast.position || position,
31 |             offset: toaster.handlers.calculateOffset(toast, toaster.toasts, {
32 |                 reverseOrder,
33 |                 gutter,
34 |                 defaultPosition: position,
35 |             }),
36 |         })),
37 |     )
38 | </script>
39 | 
40 | <div
41 |     class="svelte-hot-french-toast__toaster {class_}"
42 |     {style}
43 |     onmouseenter={toaster.handlers.pause}
44 |     onmouseleave={toaster.handlers.resume}
45 |     role="alert"
46 | >
47 |     {#if children}
48 |         {@render children({ toasts })}
49 |     {:else}
50 |         {#each toasts as toast (toast.id)}
51 |             <ToastWrapper
52 |                 {toast}
53 |                 setHeight={(height) => {
54 |                     return toaster.handlers.updateHeight(toast.id, height)
55 |                 }}
56 |             />
57 |         {/each}
58 |     {/if}
59 | </div>
60 | 
61 | <style>
62 |     .svelte-hot-french-toast__toaster {
63 |         --default-offset: 16px;
64 | 
65 |         position: fixed;
66 |         z-index: 9999;
67 |         inset: var(--default-offset);
68 |         pointer-events: none;
69 |     }
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/components/icons/IconError.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import type { IconTheme } from "../../core/types"
 3 | 
 4 |     let { primary, secondary }: Partial<IconTheme> = $props()
 5 | </script>
 6 | 
 7 | <div style:--primary={primary} style:--secondary={secondary}></div>
 8 | 
 9 | <style>
10 |     div {
11 |         width: 20px;
12 |         opacity: 0;
13 |         height: 20px;
14 |         border-radius: 10px;
15 |         background: var(--primary, #ff4b4b);
16 |         position: relative;
17 |         transform: rotate(45deg);
18 |         animation: circle-animation 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
19 |             forwards;
20 |         animation-delay: 100ms;
21 |     }
22 | 
23 |     div::after,
24 |     div::before {
25 |         content: "";
26 |         animation: first-line-animation 0.15s ease-out forwards;
27 |         animation-delay: 150ms;
28 |         position: absolute;
29 |         border-radius: 3px;
30 |         opacity: 0;
31 |         background: var(--secondary, #fff);
32 |         bottom: 9px;
33 |         inset-inline-start: 4px;
34 |         height: 2px;
35 |         width: 12px;
36 |     }
37 | 
38 |     div:before {
39 |         animation: second-line-animation 0.15s ease-out forwards;
40 |         animation-delay: 180ms;
41 |         transform: rotate(90deg);
42 |     }
43 | 
44 |     @keyframes circle-animation {
45 |         from {
46 |             transform: scale(0) rotate(45deg);
47 |             opacity: 0;
48 |         }
49 |         to {
50 |             transform: scale(1) rotate(45deg);
51 |             opacity: 1;
52 |         }
53 |     }
54 | 
55 |     @keyframes first-line-animation {
56 |         from {
57 |             transform: scale(0);
58 |             opacity: 0;
59 |         }
60 |         to {
61 |             transform: scale(1);
62 |             opacity: 1;
63 |         }
64 |     }
65 | 
66 |     @keyframes second-line-animation {
67 |         from {
68 |             transform: scale(0) rotate(90deg);
69 |             opacity: 0;
70 |         }
71 |         to {
72 |             transform: scale(1) rotate(90deg);
73 |             opacity: 1;
74 |         }
75 |     }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html class="scrollbar-thin select-none" lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8" />
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |         <link rel="icon" href="/favicon.png" />
 7 |         <link
 8 |             rel="preload"
 9 |             as="font"
10 |             type="font/woff2"
11 |             href="/fonts/jost-latin-wght-normal.woff2"
12 |             crossorigin="anonymous"
13 |         />
14 |         <link
15 |             rel="preload"
16 |             as="font"
17 |             type="font/woff2"
18 |             href="/fonts/jetbrains-mono-latin-wght-normal.woff2"
19 |             crossorigin="anonymous"
20 |         />
21 |         <style>
22 |             /* jost-latin-wght-normal */
23 |             @font-face {
24 |                 font-family: "Jost Variable";
25 |                 font-style: normal;
26 |                 font-display: block;
27 |                 font-weight: 100 900;
28 |                 /* prettier-ignore */
29 |                 src: url("/fonts/jost-latin-wght-normal.woff2") format("woff2-variations");
30 |                 /* prettier-ignore */
31 |                 unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
32 |             }
33 |             /* jetbrains-mono-latin-wght-normal */
34 |             @font-face {
35 |                 font-family: "JetBrains Mono Variable";
36 |                 font-style: normal;
37 |                 font-display: block;
38 |                 font-weight: 100 800;
39 |                 /* prettier-ignore */
40 |                 src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations");
41 |                 /* prettier-ignore */
42 |                 unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
43 |             }
44 |         </style>
45 |         %sveltekit.head%
46 |     </head>
47 |     <body class="bg-background text-foreground">
48 |         <div class="contents">%sveltekit.body%</div>
49 |     </body>
50 | </html>
51 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/components/ToastIcon.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import type { Toast } from "../core/types"
 3 |     import {
 4 |         IconError,
 5 |         IconInfo,
 6 |         IconLoading,
 7 |         IconSuccess,
 8 |         IconWarning,
 9 |     } from "./icons"
10 | 
11 |     let {
12 |         type,
13 |         icon: Icon,
14 |         iconTheme,
15 |     }: {
16 |         type: Toast["type"]
17 |         icon: Toast["icon"]
18 |         iconTheme: Toast["iconTheme"]
19 |     } = $props()
20 | </script>
21 | 
22 | {#if typeof Icon === "string"}
23 |     <div class="svelte-hot-french-toast__animated">{Icon}</div>
24 | {:else if typeof Icon !== "undefined"}
25 |     <Icon />
26 | {:else if type !== "blank"}
27 |     <div class="svelte-hot-french-toast__indicator">
28 |         <IconLoading {...iconTheme} />
29 |         {#if type !== "loading"}
30 |             <div class="svelte-hot-french-toast__status">
31 |                 {#if type === "error"}
32 |                     <IconError {...iconTheme} />
33 |                 {:else if type === "warning"}
34 |                     <IconWarning {...iconTheme} />
35 |                 {:else if type === "info"}
36 |                     <IconInfo {...iconTheme} />
37 |                 {:else}
38 |                     <IconSuccess {...iconTheme} />
39 |                 {/if}
40 |             </div>
41 |         {/if}
42 |     </div>
43 | {/if}
44 | 
45 | <style>
46 |     .svelte-hot-french-toast__indicator {
47 |         position: relative;
48 |         display: flex;
49 |         justify-content: center;
50 |         align-items: center;
51 |         min-width: 20px;
52 |         min-height: 20px;
53 |     }
54 | 
55 |     .svelte-hot-french-toast__status {
56 |         position: absolute;
57 |     }
58 | 
59 |     .svelte-hot-french-toast__animated {
60 |         position: relative;
61 |         transform: scale(0.6);
62 |         opacity: 0.4;
63 |         min-width: 20px;
64 |         animation: enter 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
65 |             forwards;
66 |     }
67 | 
68 |     @keyframes enter {
69 |         from {
70 |             transform: scale(0.6);
71 |             opacity: 0.4;
72 |         }
73 |         to {
74 |             transform: scale(1);
75 |             opacity: 1;
76 |         }
77 |     }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/src/lib/ChangePositionExamples.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import type { BundledLanguage } from "shiki"
 3 |     import toast, { type ToastPosition } from "svelte-hot-french-toast"
 4 |     import { CodeBlock } from "./CodeBlock"
 5 | 
 6 |     const positions = [
 7 |         "top-start",
 8 |         "top-center",
 9 |         "top-end",
10 |         "bottom-start",
11 |         "bottom-center",
12 |         "bottom-end",
13 |     ] as const
14 | 
15 |     let selected = $state<ToastPosition>("top-center")
16 | 
17 |     const example: {
18 |         title: string
19 |         action: (position: ToastPosition) => void
20 |         snippet: (position: ToastPosition) => {
21 |             lang: BundledLanguage
22 |             code: string
23 |         }
24 |         html?: boolean
25 |     } = {
26 |         title: "Positioning",
27 |         snippet: (position: ToastPosition) => ({
28 |             lang: "js",
29 |             code: `toast.success("Position set to ${position}", {
30 | 	position: "${position}"
31 | })`,
32 |         }),
33 |         action: (position: ToastPosition) => {
34 |             toast.success(`Position set to ${position}`, {
35 |                 position: position,
36 |             })
37 |         },
38 |     }
39 | </script>
40 | 
41 | <div class="mb-5 grid grid-cols-2 gap-4 rounded-xl md:grid-cols-3">
42 |     {#each positions as position}
43 |         <label
44 |             for={position}
45 |             class={[
46 |                 "rounded-xl border-2 border-transparent bg-gray-200 p-2 transition-colors hover:border-blue-500",
47 |                 { "border-blue-500 font-bold": position === selected },
48 |             ]}
49 |         >
50 |             <input
51 |                 class="appearance-none"
52 |                 type="radio"
53 |                 id={position}
54 |                 name="examples"
55 |                 value={position}
56 |                 onclick={() => {
57 |                     example.action(position)
58 |                 }}
59 |                 bind:group={selected}
60 |             />
61 |             <span class="font-medium">{position}</span>
62 |         </label>
63 |     {/each}
64 | </div>
65 | 
66 | {#each positions as position}
67 |     {@const code = example.snippet(position)}
68 |     <div class="space-y-4" class:hidden={position !== selected}>
69 |         <CodeBlock code={code.code} lang={code.lang} />
70 |     </div>
71 | {/each}
72 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "svelte-hot-french-toast",
 3 |     "version": "4.0.0",
 4 |     "description": "Buttery smooth toast notifications for Svelte 5. Lightweight, customizable, and beautiful by default.",
 5 |     "license": "MIT",
 6 |     "scripts": {
 7 |         "dev": "vite dev",
 8 |         "build": "vite build && pnpm package",
 9 |         "preview": "vite preview",
10 |         "check": "svelte-kit sync && svelte-check",
11 |         "check:watch": "svelte-kit sync && svelte-check --watch",
12 |         "format": "prettier -w .",
13 |         "lint": "prettier -c . && eslint .",
14 |         "package": "svelte-kit sync && svelte-package -i src/svelte-hot-french-toast && publint",
15 |         "prepare": "svelte-kit sync",
16 |         "prepublishOnly": "pnpm package"
17 |     },
18 |     "peerDependencies": {
19 |         "svelte": "^5.0.0"
20 |     },
21 |     "devDependencies": {
22 |         "@eslint/js": "9.33.0",
23 |         "@ianvs/prettier-plugin-sort-imports": "4.6.1",
24 |         "@sveltejs/adapter-static": "3.0.9",
25 |         "@sveltejs/kit": "2.27.3",
26 |         "@sveltejs/package": "2.4.1",
27 |         "@sveltejs/vite-plugin-svelte": "6.1.1",
28 |         "@tailwindcss/vite": "4.1.11",
29 |         "@typescript-eslint/eslint-plugin": "8.39.0",
30 |         "@typescript-eslint/parser": "8.39.0",
31 |         "eslint": "9.33.0",
32 |         "eslint-config-prettier": "10.1.8",
33 |         "eslint-plugin-svelte": "3.11.0",
34 |         "globals": "16.3.0",
35 |         "phosphor-icons-svelte": "2.0.9",
36 |         "prettier": "3.6.2",
37 |         "prettier-plugin-svelte": "3.4.0",
38 |         "prettier-plugin-tailwindcss": "0.6.14",
39 |         "publint": "0.3.12",
40 |         "shiki": "3.9.2",
41 |         "svelte": "5.38.0",
42 |         "svelte-check": "4.3.1",
43 |         "tailwindcss": "4.1.11",
44 |         "tailwindcss-addons": "4.2.0",
45 |         "tslib": "2.8.1",
46 |         "typescript": "5.9.2",
47 |         "typescript-eslint": "8.39.0",
48 |         "vite": "7.1.1"
49 |     },
50 |     "repository": "github:babakfp/svelte-hot-french-toast",
51 |     "files": [
52 |         "dist",
53 |         "header-image.png"
54 |     ],
55 |     "exports": {
56 |         ".": {
57 |             "types": "./dist/index.d.ts",
58 |             "svelte": "./dist/index.js"
59 |         }
60 |     },
61 |     "keywords": [
62 |         "svelte",
63 |         "notifications",
64 |         "toast",
65 |         "snackbar"
66 |     ],
67 |     "type": "module"
68 | }
69 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/components/icons/IconInfo.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import type { IconTheme } from "../../core/types"
 3 | 
 4 |     let { primary, secondary }: Partial<IconTheme> = $props()
 5 | </script>
 6 | 
 7 | <div style:--primary={primary} style:--secondary={secondary}>
 8 |     <div class="circle"></div>
 9 |     <!-- prettier-ignore -->
10 |     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 484 484"><path fill="currentColor" fill-rule="evenodd" d="M242 124c11.046 0 20 8.866 20 19.803v130.394c0 10.937-8.954 19.803-20 19.803s-20-8.866-20-19.803V143.803c0-10.937 8.954-19.803 20-19.803Z" clip-rule="evenodd"/><path fill="currentColor" d="M242 310c13.798 0 25 11.202 25 25s-11.202 25-25 25-25-11.202-25-25 11.202-25 25-25Z"/></svg>
11 | </div>
12 | 
13 | <style>
14 |     div {
15 |         width: 20px;
16 |         height: 20px;
17 |         position: relative;
18 |     }
19 | 
20 |     div::before {
21 |         content: "";
22 |         width: 100%;
23 |         height: 100%;
24 |         border-radius: 10px;
25 |         border: 2px solid var(--primary, #0096ff);
26 |         position: absolute;
27 |         top: 50%;
28 |         left: 50%;
29 |         transform: translate(-50%, -50%) scale(0);
30 |         animation: outline-animation 300ms forwards;
31 |         animation-delay: 100ms;
32 |     }
33 | 
34 |     @keyframes outline-animation {
35 |         0% {
36 |             transform: translate(-50%, -50%) scale(0);
37 |             opacity: 0;
38 |         }
39 |         20% {
40 |             transform: translate(-50%, -50%) scale(1);
41 |             opacity: 1;
42 |         }
43 |         100% {
44 |             transform: translate(-50%, -50%) scale(1.25);
45 |             opacity: 0;
46 |         }
47 |     }
48 | 
49 |     div .circle {
50 |         opacity: 0;
51 |         border-radius: 10px;
52 |         background: var(--primary, #0096ff);
53 |         animation: circle-animation 200ms
54 |             cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
55 |         animation-delay: 160ms;
56 |     }
57 | 
58 |     @keyframes circle-animation {
59 |         from {
60 |             transform: scale(0);
61 |             opacity: 0;
62 |         }
63 |         to {
64 |             transform: scale(1);
65 |             opacity: 1;
66 |         }
67 |     }
68 | 
69 |     svg {
70 |         color: var(--secondary, #fff);
71 |         width: 20px;
72 |         height: 20px;
73 |         position: absolute;
74 |         top: 0;
75 |         transform: scale(1.1);
76 |     }
77 | </style>
78 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/core/useToaster.svelte.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |     pause as _pause,
 3 |     resume as _resume,
 4 |     update,
 5 |     useToasterState,
 6 | } from "./state.svelte"
 7 | import toast from "./toast"
 8 | import type { Toast, ToastOptions, ToastPosition } from "./types"
 9 | 
10 | const calculateOffset = (
11 |     toast: Toast,
12 |     toasts: Toast[],
13 |     opts?: {
14 |         reverseOrder?: boolean
15 |         gutter?: number
16 |         defaultPosition?: ToastPosition
17 |     },
18 | ) => {
19 |     const { reverseOrder, gutter = 8, defaultPosition } = opts || {}
20 | 
21 |     const relevantToasts = toasts.filter(
22 |         (t) =>
23 |             (t.position || defaultPosition)
24 |                 === (toast.position || defaultPosition) && t.height,
25 |     )
26 |     const toastIndex = relevantToasts.findIndex((t) => t.id === toast.id)
27 |     const toastsBefore = relevantToasts.filter(
28 |         (toast, i) => i < toastIndex && toast.visible,
29 |     ).length
30 | 
31 |     const offset = relevantToasts
32 |         .filter((t) => t.visible)
33 |         .slice(...(reverseOrder ? [toastsBefore + 1] : [0, toastsBefore]))
34 |         .reduce((acc, t) => acc + (t.height || 0) + gutter, 0)
35 | 
36 |     return offset
37 | }
38 | 
39 | const handlers = {
40 |     pause() {
41 |         _pause(Date.now())
42 |     },
43 |     resume() {
44 |         _resume(Date.now())
45 |     },
46 |     updateHeight: (toastId: string, height: number) => {
47 |         update({ id: toastId, height }, false)
48 |     },
49 |     calculateOffset,
50 | }
51 | 
52 | export default (toastOptions?: ToastOptions) => {
53 |     const toaster = useToasterState(toastOptions)
54 |     const timeouts = new Map<Toast["id"], ReturnType<typeof setTimeout>>()
55 | 
56 |     $effect(() => {
57 |         if (toaster.pausedAt) {
58 |             timeouts.values().forEach((id) => clearTimeout(id))
59 |             timeouts.clear()
60 |         } else {
61 |             const now = Date.now()
62 | 
63 |             for (const t of toaster.toasts) {
64 |                 if (timeouts.has(t.id) || t.duration === Infinity) {
65 |                     continue
66 |                 }
67 | 
68 |                 const timeSinceCreated = now - t.createdAt
69 |                 const totalDuration = (t.duration || 0) + t.pauseDuration
70 |                 const timeLeft = totalDuration - timeSinceCreated
71 |                 const hasLifeTime = timeLeft > 0
72 | 
73 |                 if (hasLifeTime) {
74 |                     const timeout = setTimeout(
75 |                         () => toast.dismiss(t.id),
76 |                         timeLeft,
77 |                     )
78 |                     timeouts.set(t.id, timeout)
79 |                 } else {
80 |                     if (t.visible) {
81 |                         toast.dismiss(t.id)
82 |                     }
83 |                 }
84 |             }
85 |         }
86 |     })
87 | 
88 |     return {
89 |         get toasts() {
90 |             return toaster.toasts
91 |         },
92 |         handlers,
93 |     }
94 | }
95 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/components/ToastWrapper.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="ts">
 2 |     import { untrack, type Snippet } from "svelte"
 3 |     import type { DOMToast } from "../core/types"
 4 |     import { prefersReducedMotion } from "../core/utils"
 5 |     import ToastBar from "./ToastBar.svelte"
 6 |     import ToastMessage from "./ToastMessage.svelte"
 7 | 
 8 |     let {
 9 |         toast,
10 |         setHeight,
11 |         children,
12 |     }: {
13 |         toast: DOMToast
14 |         /**
15 |          * A callback function that is called when the toast's height changes.
16 |          *
17 |          * This is useful when you want to update the height of the toast
18 |          * dynamically, for example, when the toast is being displayed.
19 |          *
20 |          * @example
21 |          * ```ts
22 |          * <ToastWrapper
23 |          *      {toast}
24 |          *      setHeight={(height) => {
25 |          *          return toaster.handlers.updateHeight(toast.id, height)
26 |          *      }}
27 |          *  />
28 |          * ```
29 |          */
30 |         setHeight: (height: number) => void
31 |         children?: Snippet<[{ toast: DOMToast }]>
32 |     } = $props()
33 | 
34 |     let clientHeight = $state<number>()
35 | 
36 |     $effect(() => {
37 |         untrack(() => {
38 |             if (typeof clientHeight !== "number") return
39 |             setHeight(clientHeight)
40 |         })
41 |         const _dependency = clientHeight
42 |     })
43 | 
44 |     const top = $derived(toast.position?.includes("top") ? 0 : undefined)
45 |     const bottom = $derived(toast.position?.includes("bottom") ? 0 : undefined)
46 |     const factor = $derived(toast.position?.includes("top") ? 1 : -1)
47 |     const justifyContent = $derived(
48 |         (toast.position?.includes("center") && "center")
49 |             || (toast.position?.includes("end") && "flex-end")
50 |             || undefined,
51 |     )
52 | </script>
53 | 
54 | <div
55 |     bind:clientHeight
56 |     class="svelte-hot-french-toast__wrapper"
57 |     class:svelte-hot-french-toast__active={toast.visible}
58 |     class:svelte-hot-french-toast__transition={!prefersReducedMotion()}
59 |     style:--factor={factor}
60 |     style:--offset={toast.offset}
61 |     style:top
62 |     style:bottom
63 |     style:justify-content={justifyContent}
64 | >
65 |     {#if toast.type === "custom"}
66 |         <ToastMessage {toast} />
67 |     {:else if children}
68 |         {@render children({ toast })}
69 |     {:else}
70 |         <ToastBar {toast} position={toast.position} />
71 |     {/if}
72 | </div>
73 | 
74 | <style>
75 |     .svelte-hot-french-toast__wrapper {
76 |         inset-inline: 0;
77 |         display: flex;
78 |         position: absolute;
79 |         transform: translateY(calc(var(--offset, 16px) * var(--factor) * 1px));
80 |     }
81 | 
82 |     .svelte-hot-french-toast__transition {
83 |         transition: all 230ms cubic-bezier(0.21, 1.02, 0.73, 1);
84 |     }
85 | 
86 |     .svelte-hot-french-toast__active {
87 |         z-index: 9999;
88 |     }
89 | 
90 |     .svelte-hot-french-toast__active > :global(*) {
91 |         pointer-events: auto;
92 |     }
93 | </style>
94 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/core/types.ts:
--------------------------------------------------------------------------------
  1 | import type { Component } from "svelte"
  2 | 
  3 | export type ToastType =
  4 |     | "success"
  5 |     | "error"
  6 |     | "info"
  7 |     | "loading"
  8 |     | "blank"
  9 |     | "custom"
 10 |     | "warning"
 11 | 
 12 | export type ToastPosition =
 13 |     | "top-start"
 14 |     | "top-center"
 15 |     | "top-end"
 16 |     | "bottom-start"
 17 |     | "bottom-center"
 18 |     | "bottom-end"
 19 | 
 20 | export type Renderable<
 21 |     T extends Record<string, unknown> = Record<string, unknown>,
 22 | > = Component<T> | string | undefined
 23 | 
 24 | export type IconTheme = {
 25 |     primary: string
 26 |     secondary: string
 27 | }
 28 | 
 29 | export type ValueFunction<TValue, TArg> = (arg: TArg) => TValue
 30 | export type ValueOrFunction<TValue, TArg> = TValue | ValueFunction<TValue, TArg>
 31 | 
 32 | const isFunction = <TValue, TArg>(
 33 |     valOrFunction: ValueOrFunction<TValue, TArg>,
 34 | ): valOrFunction is ValueFunction<TValue, TArg> =>
 35 |     typeof valOrFunction === "function"
 36 | 
 37 | export const resolveValue = <TValue, TArg>(
 38 |     valOrFunction: ValueOrFunction<TValue, TArg>,
 39 |     arg: TArg,
 40 | ): TValue => (isFunction(valOrFunction) ? valOrFunction(arg) : valOrFunction)
 41 | 
 42 | export type Toast<T extends Record<string, unknown> = Record<string, unknown>> =
 43 |     {
 44 |         type: ToastType
 45 |         id: string
 46 |         message: Renderable<T>
 47 |         icon?: Renderable
 48 |         duration?: number
 49 |         pauseDuration: number
 50 |         position?: ToastPosition
 51 | 
 52 |         // We use `Omit` here in the case that the Component has `let { toast }: { toast: Toast } = $props()`.
 53 |         // We are already passing the toast to the component, and it should not be included in props.
 54 |         props?: Omit<T, "toast">
 55 | 
 56 |         ariaProps: {
 57 |             role: "status" | "alert"
 58 |             "aria-live": "assertive" | "off" | "polite"
 59 |         }
 60 | 
 61 |         style?: string
 62 |         class?: string
 63 |         iconTheme?: IconTheme
 64 | 
 65 |         createdAt: number
 66 |         visible: boolean
 67 |         height?: number
 68 |     }
 69 | 
 70 | export type DOMToast<
 71 |     T extends Record<string, unknown> = Record<string, unknown>,
 72 | > = Toast<T> & {
 73 |     offset: number
 74 | }
 75 | 
 76 | export type ToastOptions<
 77 |     T extends Record<string, unknown> = Record<string, unknown>,
 78 | > = Partial<
 79 |     Pick<
 80 |         Toast<T>,
 81 |         | "id"
 82 |         | "icon"
 83 |         | "duration"
 84 |         | "ariaProps"
 85 |         | "class"
 86 |         | "style"
 87 |         | "position"
 88 |         | "iconTheme"
 89 |         | "props"
 90 |     >
 91 | >
 92 | 
 93 | export type DefaultToastOptions = ToastOptions & {
 94 |     [key in ToastType]?: ToastOptions
 95 | }
 96 | 
 97 | export type PromiseToastOptions = DefaultToastOptions & {
 98 |     /**
 99 |      * If you want to keep the toast after the promise is resolved or rejected, set this to true.
100 |      * You would need to add a close button to the toast, so that the user can dismiss the toast manually.
101 |      */
102 |     keepAfterResolutionOrRejection?: boolean
103 | }
104 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/components/icons/IconWarning.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |     import type { IconTheme } from "../../core/types"
  3 | 
  4 |     let { primary, secondary }: Partial<IconTheme> = $props()
  5 | </script>
  6 | 
  7 | <div style:--primary={primary} style:--secondary={secondary}>
  8 |     <div class="circle"></div>
  9 |     <!-- prettier-ignore -->
 10 |     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 484 484"><path fill="currentColor" fill-rule="evenodd" d="M242 124c11.046 0 20 8.866 20 19.803v130.394c0 10.937-8.954 19.803-20 19.803s-20-8.866-20-19.803V143.803c0-10.937 8.954-19.803 20-19.803Z" clip-rule="evenodd"/><path fill="currentColor" d="M242 310c13.798 0 25 11.202 25 25s-11.202 25-25 25-25-11.202-25-25 11.202-25 25-25Z"/></svg>
 11 | </div>
 12 | 
 13 | <style>
 14 |     div {
 15 |         width: 20px;
 16 |         height: 20px;
 17 |         position: relative;
 18 |     }
 19 | 
 20 |     div::before {
 21 |         content: "";
 22 |         width: 100%;
 23 |         height: 100%;
 24 |         border-radius: 10px;
 25 |         border: 2px solid var(--primary, #ffa400);
 26 |         position: absolute;
 27 |         top: 50%;
 28 |         left: 50%;
 29 |         transform: translate(-50%, -50%) scale(0);
 30 |         animation: outline-animation 300ms forwards;
 31 |         animation-delay: 100ms;
 32 |     }
 33 | 
 34 |     @keyframes outline-animation {
 35 |         0% {
 36 |             transform: translate(-50%, -50%) scale(0);
 37 |             opacity: 0;
 38 |         }
 39 |         20% {
 40 |             transform: translate(-50%, -50%) scale(1);
 41 |             opacity: 1;
 42 |         }
 43 |         100% {
 44 |             transform: translate(-50%, -50%) scale(1.25);
 45 |             opacity: 0;
 46 |         }
 47 |     }
 48 | 
 49 |     div .circle {
 50 |         opacity: 0;
 51 |         border-radius: 10px;
 52 |         background: var(--primary, #ffa400);
 53 |         animation: circle-animation 200ms
 54 |             cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
 55 |         animation-delay: 160ms;
 56 |     }
 57 | 
 58 |     @keyframes circle-animation {
 59 |         from {
 60 |             transform: scale(0);
 61 |             opacity: 0;
 62 |         }
 63 |         to {
 64 |             transform: scale(1);
 65 |             opacity: 1;
 66 |         }
 67 |     }
 68 | 
 69 |     svg {
 70 |         color: var(--secondary, #fff);
 71 |         width: 20px;
 72 |         height: 20px;
 73 |         position: absolute;
 74 |         top: 0;
 75 |         transform: scale(0);
 76 |         animation: exclamation-animation 500ms forwards;
 77 |         animation-delay: 100ms;
 78 |         opacity: 0;
 79 |     }
 80 | 
 81 |     @keyframes exclamation-animation {
 82 |         0% {
 83 |             transform: scale(0);
 84 |             opacity: 0;
 85 |         }
 86 |         20% {
 87 |             transform: scale(0.8);
 88 |             opacity: 1;
 89 |         }
 90 |         35% {
 91 |             transform: scale(1.35);
 92 |             opacity: 1;
 93 |         }
 94 |         70% {
 95 |             transform: scale(0.9);
 96 |             opacity: 1;
 97 |         }
 98 |         100% {
 99 |             transform: scale(1.1);
100 |             opacity: 1;
101 |         }
102 |     }
103 | </style>
104 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/core/toast.ts:
--------------------------------------------------------------------------------
  1 | import { dismiss, remove, upsert } from "./state.svelte"
  2 | import {
  3 |     resolveValue,
  4 |     type PromiseToastOptions,
  5 |     type Renderable,
  6 |     type Toast,
  7 |     type ToastOptions,
  8 |     type ToastType,
  9 |     type ValueOrFunction,
 10 | } from "./types"
 11 | import { genId } from "./utils"
 12 | 
 13 | type Message<T extends Record<string, unknown> = Record<string, unknown>> =
 14 |     Renderable<T>
 15 | 
 16 | type ToastHandler = <
 17 |     T extends Record<string, unknown> = Record<string, unknown>,
 18 | >(
 19 |     message: Message<T>,
 20 |     options?: ToastOptions<T>,
 21 | ) => string
 22 | 
 23 | const createToast = <
 24 |     T extends Record<string, unknown> = Record<string, unknown>,
 25 | >(
 26 |     message: Message<T>,
 27 |     type: ToastType = "blank",
 28 |     opts?: ToastOptions<T>,
 29 | ): Toast<T> => ({
 30 |     createdAt: Date.now(),
 31 |     visible: true,
 32 |     type,
 33 |     ariaProps: {
 34 |         role: "status",
 35 |         "aria-live": "polite",
 36 |     },
 37 |     message,
 38 |     pauseDuration: 0,
 39 |     ...opts,
 40 |     id: opts?.id || genId(),
 41 | })
 42 | 
 43 | const createHandler = (type?: ToastType): ToastHandler => {
 44 |     return (message, options) => {
 45 |         const toast = createToast(message, type, options)
 46 |         // @ts-expect-error: TODO: I have no idea how to fix this.
 47 |         upsert(toast)
 48 |         return toast.id
 49 |     }
 50 | }
 51 | 
 52 | const toast = <T extends Record<string, unknown> = Record<string, unknown>>(
 53 |     message: Message<T>,
 54 |     opts?: ToastOptions<T>,
 55 | ) => createHandler("blank")(message, opts)
 56 | 
 57 | toast.error = createHandler("error")
 58 | toast.success = createHandler("success")
 59 | toast.loading = createHandler("loading")
 60 | toast.custom = createHandler("custom")
 61 | toast.warning = createHandler("warning")
 62 | toast.info = createHandler("info")
 63 | 
 64 | toast.dismiss = (toastId?: string) => {
 65 |     dismiss(toastId)
 66 | }
 67 | 
 68 | toast.remove = (toastId?: string) => remove(toastId)
 69 | 
 70 | toast.promise = <T>(
 71 |     promise: Promise<T>,
 72 |     msgs: {
 73 |         loading: Renderable
 74 |         success: ValueOrFunction<Renderable, T>
 75 |         error: ValueOrFunction<Renderable, unknown>
 76 |     },
 77 |     opts?: PromiseToastOptions,
 78 | ) => {
 79 |     const id = toast.loading(msgs.loading, { ...opts, ...opts?.loading })
 80 | 
 81 |     promise
 82 |         .then((p) => {
 83 |             toast.success(resolveValue(msgs.success, p), {
 84 |                 id,
 85 |                 ...opts,
 86 |                 ...opts?.success,
 87 |                 ...(opts?.keepAfterResolutionOrRejection ?
 88 |                     { duration: Infinity }
 89 |                 :   {}),
 90 |             })
 91 |             return p
 92 |         })
 93 |         .catch((e) => {
 94 |             toast.error(resolveValue(msgs.error, e), {
 95 |                 id,
 96 |                 ...opts,
 97 |                 ...opts?.error,
 98 |                 ...(opts?.keepAfterResolutionOrRejection ?
 99 |                     { duration: Infinity }
100 |                 :   {}),
101 |             })
102 |         })
103 | 
104 |     return promise
105 | }
106 | 
107 | export default toast
108 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/core/state.svelte.ts:
--------------------------------------------------------------------------------
  1 | import type { DefaultToastOptions, Toast, ToastType } from "./types"
  2 | 
  3 | const TOAST_LIMIT = 20
  4 | const TOAST_EXPIRE_DISMISS_DELAY = 1000
  5 | 
  6 | type State = {
  7 |     toasts: Toast[]
  8 |     pausedAt: number
  9 | }
 10 | 
 11 | let toasts: State["toasts"] = $state([])
 12 | let pausedAt: State["pausedAt"] = $state(0)
 13 | 
 14 | const toastTimeouts = new Map<Toast["id"], ReturnType<typeof setTimeout>>()
 15 | 
 16 | const addToRemoveQueue = (toastId: string) => {
 17 |     if (toastTimeouts.has(toastId)) {
 18 |         return
 19 |     }
 20 | 
 21 |     const timeout = setTimeout(() => {
 22 |         toastTimeouts.delete(toastId)
 23 |         remove(toastId)
 24 |     }, TOAST_EXPIRE_DISMISS_DELAY)
 25 | 
 26 |     toastTimeouts.set(toastId, timeout)
 27 | }
 28 | 
 29 | const clearFromRemoveQueue = (toastId: string) => {
 30 |     const timeout = toastTimeouts.get(toastId)
 31 |     if (timeout) {
 32 |         clearTimeout(timeout)
 33 |     }
 34 | }
 35 | 
 36 | export const update = (toast: Partial<Toast>, clearTimeout = true) => {
 37 |     if (clearTimeout && toast.id) {
 38 |         clearFromRemoveQueue(toast.id)
 39 |     }
 40 |     toasts = toasts.map((t) => (t.id === toast.id ? { ...t, ...toast } : t))
 41 | }
 42 | 
 43 | export const add = (toast: Toast) => {
 44 |     toasts.unshift(toast)
 45 |     toasts = toasts.slice(0, TOAST_LIMIT)
 46 | }
 47 | 
 48 | export const upsert = (toast: Toast) => {
 49 |     if (toasts.find((t) => t.id === toast.id)) {
 50 |         update(toast)
 51 |     } else {
 52 |         add(toast)
 53 |     }
 54 | }
 55 | 
 56 | export const dismiss = (toastId?: Toast["id"]) => {
 57 |     if (toastId) {
 58 |         addToRemoveQueue(toastId)
 59 |     } else {
 60 |         toasts.forEach((toast) => {
 61 |             addToRemoveQueue(toast.id)
 62 |         })
 63 |     }
 64 | 
 65 |     toasts = toasts.map((t) =>
 66 |         t.id === toastId || toastId === undefined ?
 67 |             { ...t, visible: false }
 68 |         :   t,
 69 |     )
 70 | }
 71 | 
 72 | export const remove = (toastId?: Toast["id"]) => {
 73 |     if (toastId === undefined) {
 74 |         toasts = []
 75 |     }
 76 | 
 77 |     toasts = toasts.filter((t) => t.id !== toastId)
 78 | }
 79 | 
 80 | export const pause = (time: number) => {
 81 |     pausedAt = time
 82 | }
 83 | 
 84 | export const resume = (time: number) => {
 85 |     const timeSincePaused = time - pausedAt
 86 | 
 87 |     toasts = toasts.map((t) => ({
 88 |         ...t,
 89 |         pauseDuration: t.pauseDuration + timeSincePaused,
 90 |     }))
 91 | 
 92 |     pausedAt = 0
 93 | }
 94 | 
 95 | const defaultTimeouts: {
 96 |     [key in ToastType]: number
 97 | } = {
 98 |     blank: 4000,
 99 |     error: 4000,
100 |     success: 2000,
101 |     loading: Infinity,
102 |     custom: 4000,
103 |     warning: 4000,
104 |     info: 4000,
105 | }
106 | 
107 | export const useToasterState = (
108 |     toastOptions: DefaultToastOptions = {},
109 | ): State => {
110 |     const mergedToasts = $derived(
111 |         toasts.map((t) => ({
112 |             ...toastOptions,
113 |             ...toastOptions[t.type],
114 |             ...t,
115 |             duration:
116 |                 t.duration
117 |                 || toastOptions[t.type]?.duration
118 |                 || toastOptions?.duration
119 |                 || defaultTimeouts[t.type],
120 |             style: [
121 |                 toastOptions.style,
122 |                 toastOptions[t.type]?.style,
123 |                 t.style,
124 |             ].join(";"),
125 |         })),
126 |     )
127 | 
128 |     return {
129 |         get toasts() {
130 |             return mergedToasts
131 |         },
132 |         get pausedAt() {
133 |             return pausedAt
134 |         },
135 |     }
136 | }
137 | 


--------------------------------------------------------------------------------
/src/svelte-hot-french-toast/components/ToastBar.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |     import type { Snippet } from "svelte"
  3 |     import type { Toast, ToastPosition } from "../core/types"
  4 |     import { prefersReducedMotion } from "../core/utils"
  5 |     import ToastIcon from "./ToastIcon.svelte"
  6 |     import ToastMessage from "./ToastMessage.svelte"
  7 | 
  8 |     let {
  9 |         toast,
 10 |         position,
 11 |         style,
 12 |         children,
 13 |     }: {
 14 |         toast: Toast
 15 |         position?: ToastPosition
 16 |         style?: string
 17 |         children?: Snippet<
 18 |             [
 19 |                 {
 20 |                     toast: Toast
 21 |                     ToastIcon: typeof ToastIcon
 22 |                     ToastMessage: typeof ToastMessage
 23 |                 },
 24 |             ]
 25 |         >
 26 |     } = $props()
 27 | 
 28 |     const factor = $derived.by(() => {
 29 |         const top = (toast.position || position || "top-center").includes("top")
 30 |         return top ? 1 : -1
 31 |     })
 32 | 
 33 |     const animation = $derived.by(() => {
 34 |         const [enter, exit] =
 35 |             prefersReducedMotion() ?
 36 |                 [
 37 |                     "svelte-hot-french-toast__fade-in",
 38 |                     "svelte-hot-french-toast__fade-out",
 39 |                 ]
 40 |             :   [
 41 |                     "svelte-hot-french-toast__enter",
 42 |                     "svelte-hot-french-toast__exit",
 43 |                 ]
 44 |         return toast.visible ? enter : exit
 45 |     })
 46 | </script>
 47 | 
 48 | <div
 49 |     class="svelte-hot-french-toast__base {toast.height ? animation : (
 50 |         'svelte-hot-french-toast__transparent'
 51 |     )} {toast.class}"
 52 |     style="{style}; {toast.style}"
 53 |     style:--factor={factor}
 54 | >
 55 |     {#if children}
 56 |         {@render children({
 57 |             toast,
 58 |             ToastIcon,
 59 |             ToastMessage,
 60 |         })}
 61 |     {:else}
 62 |         <ToastIcon
 63 |             type={toast.type}
 64 |             icon={toast.icon}
 65 |             iconTheme={toast.iconTheme}
 66 |         />
 67 |         <ToastMessage {toast} />
 68 |     {/if}
 69 | </div>
 70 | 
 71 | <style>
 72 |     .svelte-hot-french-toast__base {
 73 |         display: flex;
 74 |         align-items: center;
 75 |         background: #fff;
 76 |         color: #363636;
 77 |         line-height: 1.3;
 78 |         will-change: transform;
 79 |         box-shadow:
 80 |             0 3px 10px rgba(0, 0, 0, 0.1),
 81 |             0 3px 3px rgba(0, 0, 0, 0.05);
 82 |         max-width: 350px;
 83 |         pointer-events: auto;
 84 |         padding: 8px 10px;
 85 |         border-radius: 8px;
 86 |     }
 87 | 
 88 |     .svelte-hot-french-toast__transparent {
 89 |         opacity: 0;
 90 |     }
 91 | 
 92 |     .svelte-hot-french-toast__enter {
 93 |         animation: enter-animation 0.35s cubic-bezier(0.21, 1.02, 0.73, 1)
 94 |             forwards;
 95 |     }
 96 | 
 97 |     .svelte-hot-french-toast__exit {
 98 |         animation: exit-animation 0.4s cubic-bezier(0.06, 0.71, 0.55, 1)
 99 |             forwards;
100 |     }
101 | 
102 |     .svelte-hot-french-toast__fade-in {
103 |         animation: fade-in-animation 0.35s cubic-bezier(0.21, 1.02, 0.73, 1)
104 |             forwards;
105 |     }
106 | 
107 |     .svelte-hot-french-toast__fade-out {
108 |         animation: fade-out-animation 0.4s cubic-bezier(0.06, 0.71, 0.55, 1)
109 |             forwards;
110 |     }
111 | 
112 |     @keyframes enter-animation {
113 |         0% {
114 |             transform: translate3d(0, calc(var(--factor) * -200%), 0) scale(0.6);
115 |             opacity: 0.5;
116 |         }
117 |         100% {
118 |             transform: translate3d(0, 0, 0) scale(1);
119 |             opacity: 1;
120 |         }
121 |     }
122 | 
123 |     @keyframes exit-animation {
124 |         0% {
125 |             transform: translate3d(0, 0, -1px) scale(1);
126 |             opacity: 1;
127 |         }
128 |         100% {
129 |             transform: translate3d(0, calc(var(--factor) * -150%), -1px)
130 |                 scale(0.6);
131 |             opacity: 0;
132 |         }
133 |     }
134 | 
135 |     @keyframes fade-in-animation {
136 |         0% {
137 |             opacity: 0;
138 |         }
139 |         100% {
140 |             opacity: 1;
141 |         }
142 |     }
143 | 
144 |     @keyframes fade-out-animation {
145 |         0% {
146 |             opacity: 1;
147 |         }
148 |         100% {
149 |             opacity: 0;
150 |         }
151 |     }
152 | </style>
153 | 


--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="ts">
  2 |     import IconCheckBold from "phosphor-icons-svelte/IconCheckBold.svelte"
  3 |     import IconSparkleFill from "phosphor-icons-svelte/IconSparkleFill.svelte"
  4 |     import toast, { Toaster } from "svelte-hot-french-toast"
  5 |     import ChangePositionExamples from "$lib/ChangePositionExamples.svelte"
  6 |     import { CodeBlock } from "$lib/CodeBlock"
  7 |     import Examples from "$lib/Examples.svelte"
  8 |     import usageCode from "$lib/usage-code.svelte?raw"
  9 | 
 10 |     const makeToast = () => {
 11 |         toast.promise(
 12 |             new Promise((resolve, reject) => {
 13 |                 setTimeout(Math.random() < 0.8 ? resolve : reject, 1000)
 14 |             }),
 15 |             {
 16 |                 loading: "Toasting bread...",
 17 |                 success: "Here’s your toast!",
 18 |                 error: "Your toast burned :(",
 19 |             },
 20 |         )
 21 |     }
 22 | </script>
 23 | 
 24 | <Toaster />
 25 | 
 26 | <section class="bg-amber-50 py-24">
 27 |     <div class="container flex max-w-xl flex-col items-center text-center">
 28 |         <img class="mb-10 h-16" src="favicon.png" alt="" />
 29 |         <div
 30 |             class="mb-10 flex flex-col items-center space-y-3 text-white md:flex-row md:space-y-0 md:space-x-3"
 31 |         >
 32 |             <div
 33 |                 class="-rotate-2 rounded-xl bg-gray-700 p-4 text-xl font-extrabold tracking-widest uppercase shadow-lg md:text-2xl"
 34 |             >
 35 |                 Svelte
 36 |             </div>
 37 |             <div
 38 |                 class="rotate-3 rounded-xl bg-orange-500 p-4 text-xl font-extrabold tracking-widest uppercase shadow-lg md:text-2xl"
 39 |             >
 40 |                 Hot French
 41 |             </div>
 42 |             <div
 43 |                 class="-rotate-2 rounded-xl bg-gray-700 p-4 text-xl font-extrabold tracking-widest uppercase shadow-lg md:text-2xl"
 44 |             >
 45 |                 Toast
 46 |             </div>
 47 |         </div>
 48 |         <h1 class="text-3xl font-bold md:text-5xl">
 49 |             Buttery smooth toast notifications.
 50 |         </h1>
 51 |         <p class="mt-10 max-w-prose text-lg md:text-xl">
 52 |             Lightweight, customizable, and beautiful by default.
 53 |         </p>
 54 |         <div class="mt-10 flex items-center space-x-4">
 55 |             <button
 56 |                 onclick={makeToast}
 57 |                 class="flex items-center space-x-2 rounded-xl border-2 border-amber-400 bg-amber-300 px-5 py-2 text-lg font-bold shadow"
 58 |             >
 59 |                 <IconSparkleFill class="text-xl" />
 60 |                 <span>Make toast</span>
 61 |             </button>
 62 |             <a
 63 |                 href="https://github.com/babakfp/svelte-hot-french-toast"
 64 |                 class="flex items-center space-x-2 rounded-xl border-2 border-gray-100 bg-gray-50 px-5 py-2 text-lg"
 65 |             >
 66 |                 <span>Source</span>
 67 |             </a>
 68 |         </div>
 69 |         <div
 70 |             class="mt-10 grid grid-cols-2 gap-4 self-stretch font-medium md:grid-cols-3"
 71 |         >
 72 |             {#each ["Emoji Support", "Customizable", "Promise API", "Pause on hover", "Accessible", "Headless use"] as feature}
 73 |                 <div class="flex space-x-2">
 74 |                     <IconCheckBold class="text-xl text-green-600" />
 75 |                     <p>{feature}</p>
 76 |                 </div>
 77 |             {/each}
 78 |         </div>
 79 |     </div>
 80 | </section>
 81 | 
 82 | <div class="h-8 bg-gradient-to-b from-amber-50 to-gray-100"></div>
 83 | 
 84 | <div class="container max-w-2xl space-y-24 pt-24">
 85 |     <section class="space-y-8">
 86 |         <div>
 87 |             <h2 class="mb-4 text-xl font-bold">Installation</h2>
 88 |             <CodeBlock
 89 |                 code="pnpm add -D svelte-hot-french-toast"
 90 |                 lang="shell"
 91 |             />
 92 |         </div>
 93 |         <div>
 94 |             <h2 class="mb-4 text-xl font-bold">Usage</h2>
 95 |             <CodeBlock code={usageCode} lang="svelte" />
 96 |         </div>
 97 |     </section>
 98 | 
 99 |     <section>
100 |         <h2 class="mb-4 text-xl font-bold">Examples</h2>
101 |         <Examples />
102 |     </section>
103 | 
104 |     <section>
105 |         <h2 class="mb-4 text-xl font-bold">Change Position</h2>
106 |         <ChangePositionExamples />
107 |     </section>
108 | </div>
109 | 
110 | <div class="h-8 bg-gradient-to-b from-gray-100 to-white"></div>
111 | 
112 | <footer class="bg-white pt-24 pb-4">
113 |     <div class="container max-w-2xl space-y-2 text-center">
114 |         <a
115 |             class="underline"
116 |             href="https://github.com/babakfp/svelte-hot-french-toast"
117 |         >
118 |             GitHub
119 |         </a>
120 |     </div>
121 | </footer>
122 | 


--------------------------------------------------------------------------------
/src/lib/examples.ts:
--------------------------------------------------------------------------------
  1 | import type { BundledLanguage } from "shiki"
  2 | import toast from "svelte-hot-french-toast"
  3 | import RichContent from "./RichContent.svelte"
  4 | import richContent from "./RichContent.svelte?raw"
  5 | 
  6 | type Example = {
  7 |     title: string
  8 |     action: () => void
  9 |     emoji: string
 10 |     snippet:
 11 |         | { lang: BundledLanguage; code: string }
 12 |         | { lang: BundledLanguage; code: string }[]
 13 |     html?: boolean
 14 | }
 15 | 
 16 | export default [
 17 |     {
 18 |         title: "Success",
 19 |         emoji: "✅",
 20 |         snippet: {
 21 |             lang: "js",
 22 |             code: `toast.success("Successfully toasted!")`,
 23 |         },
 24 |         action: () => {
 25 |             toast.success("Successfully toasted!")
 26 |         },
 27 |     },
 28 |     {
 29 |         title: "Error",
 30 |         emoji: "❌",
 31 |         snippet: {
 32 |             lang: "js",
 33 |             code: `toast.error("This didn't work.")`,
 34 |         },
 35 |         action: () => {
 36 |             toast.error("This didn't work.")
 37 |         },
 38 |     },
 39 |     {
 40 |         title: "Promise",
 41 |         emoji: "⏳",
 42 |         snippet: {
 43 |             lang: "js",
 44 |             code: `toast.promise(
 45 | 	saveSettings(settings),
 46 | 	{
 47 | 		loading: "Saving...",
 48 | 		success: "Settings saved!",
 49 | 		error: "Could not save!",
 50 | 	}
 51 | )`,
 52 |         },
 53 |         action: () => {
 54 |             const promise = new Promise((resolve, reject) => {
 55 |                 setTimeout(Math.random() < 0.8 ? resolve : reject, 1000)
 56 |             })
 57 | 
 58 |             toast.promise(promise, {
 59 |                 loading: "Saving...",
 60 |                 success: "Settings saved!",
 61 |                 error: "Could not save!",
 62 |             })
 63 |         },
 64 |     },
 65 |     {
 66 |         title: "Multiline",
 67 |         emoji: "↩️",
 68 |         snippet: {
 69 |             lang: "js",
 70 |             code: `toast(
 71 | 	"This toast is super big. I don't think anyone could eat it in one bite.\\n\\nIt's larger than you expected. You eat it but it does not seem to get smaller.",
 72 | 	{
 73 | 		duration: 6000,
 74 | 	}
 75 | )`,
 76 |         },
 77 |         action: () => {
 78 |             toast(
 79 |                 "This toast is super big. I don't think anyone could eat it in one bite.\n\n It's larger than you expected. You eat it but it does not seem to get smaller.",
 80 |                 {
 81 |                     duration: 6000,
 82 |                 },
 83 |             )
 84 |         },
 85 |     },
 86 |     {
 87 |         title: "Emoji",
 88 |         emoji: "👏",
 89 |         snippet: {
 90 |             lang: "js",
 91 |             code: `toast("Good Job!", {
 92 | 	icon: "👏",
 93 | })`,
 94 |         },
 95 |         action: () => {
 96 |             toast("Good Job!", {
 97 |                 icon: "👏",
 98 |             })
 99 |         },
100 |     },
101 |     {
102 |         title: "Dark mode",
103 |         emoji: "🌚",
104 |         snippet: {
105 |             lang: "js",
106 |             code: `toast("Hello Darkness!", {
107 | 	icon: "👏",
108 | 	style: "border-radius: 200px; background: #333; color: #fff;"
109 | })`,
110 |         },
111 |         action: () => {
112 |             toast("Hello Darkness!", {
113 |                 icon: "👏",
114 |                 style: "border-radius: 200px; background: #333; color: #fff;",
115 |             })
116 |         },
117 |     },
118 |     {
119 |         title: "Rich content",
120 |         emoji: "🔩",
121 |         snippet: [
122 |             {
123 |                 lang: "svelte",
124 |                 code: `<script lang="ts">
125 | 	import toast from "svelte-hot-french-toast"
126 |     import RichContent from "./RichContent.svelte"
127 | 
128 | 	toast(RichContent, { props: { myText: "bold" } })
129 | </script>`,
130 |             },
131 |             {
132 |                 lang: "svelte",
133 |                 code: `// RichContent.svelte
134 | 
135 | ${richContent}`,
136 |             },
137 |         ],
138 |         html: true,
139 |         action: () => {
140 |             toast(RichContent, { props: { myText: "bold" } })
141 |         },
142 |     },
143 |     {
144 |         title: "Themed",
145 |         emoji: "🎨",
146 |         snippet: {
147 |             lang: "js",
148 |             code: `toast.success("Look at me!", {
149 | 	style: "border: 1px solid #713200; padding: 16px; color: #713200;",
150 | 	iconTheme: {
151 | 		primary: "#713200",
152 | 		secondary: "#FFFAEE"
153 | 	}
154 | })`,
155 |         },
156 | 
157 |         action: () => {
158 |             toast.success("Look at me!", {
159 |                 style: "border: 1px solid #713200; padding: 16px; color: #713200;",
160 |                 iconTheme: {
161 |                     primary: "#713200",
162 |                     secondary: "#FFFAEE",
163 |                 },
164 |             })
165 |         },
166 |     },
167 |     {
168 |         title: "Positioning",
169 |         emoji: "⬆️",
170 |         snippet: {
171 |             lang: "js",
172 |             code: `toast.success("Always at the bottom.", {
173 | 	position: "bottom-center"
174 | })`,
175 |         },
176 |         action: () => {
177 |             toast.success("Always at the bottom.", {
178 |                 position: "bottom-center",
179 |                 duration: 10000,
180 |             })
181 |         },
182 |     },
183 |     {
184 |         title: "Warning",
185 |         emoji: "⚠️",
186 |         snippet: {
187 |             lang: "js",
188 |             code: `toast.warning("Be careful!")`,
189 |         },
190 |         action: () => {
191 |             toast.warning("Be careful!")
192 |         },
193 |     },
194 |     {
195 |         title: "Info",
196 |         emoji: "ℹ️",
197 |         snippet: {
198 |             lang: "js",
199 |             code: `toast.info("This is some info.")`,
200 |         },
201 |         action: () => {
202 |             toast.info("This is some info.")
203 |         },
204 |     },
205 | ] satisfies Example[]
206 | 


--------------------------------------------------------------------------------