Components test

package.json

@@ -16,6 +16,8 @@
 	},
 	"devDependencies": {
 		"@beyonk/svelte-mapbox": "^9.1.1",
+		"@melt-ui/pp": "^0.3.0",
+		"@melt-ui/svelte": "^0.76.3",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/enhanced-img": "^0.1.9",
 		"@sveltejs/kit": "^1.30.4",
@@ -51,6 +53,7 @@
 		"bits-ui": "^0.21.1",
 		"clsx": "^2.1.0",
 		"d3": "^7.9.0",
+		"lucide-svelte": "^0.370.0",
 		"mapbox-gl": "^3.3.0",
 		"stripe": "^13.3.0",
 		"svelte-action-balancer": "^1.0.4",

src/lib/Toaster.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" context="module">
+  export type ToastData = {
+    title: string
+    description: string
+    color: string
+  }
+
+  const {
+    elements: { content, title, description, close },
+    helpers,
+    states: { toasts },
+    actions: { portal },
+  } = createToaster<ToastData>()
+
+  export const addToast = helpers.addToast
+</script>
+
+<script lang="ts">
+  import { createToaster, melt } from "@melt-ui/svelte"
+</script>
+
+<div use:portal>
+  {#each $toasts as { id, data } (id)}
+    <div use:melt={$content(id)}>
+      <div>
+        <div>
+          <h3 use:melt={$title(id)}>
+            {data.title}
+            <span style:color={data.color} />
+          </h3>
+          <div use:melt={$description(id)}>
+            {data.description}
+          </div>
+        </div>
+        <button use:melt={$close(id)} aria-label="close notification">
+          X
+        </button>
+      </div>
+    </div>
+  {/each}
+</div>

src/lib/components/ui/Toast/index.svelte

@@ -0,0 +1,71 @@
+<script lang="ts" context="module">
+  export type ToastData = {
+    title: string
+    description: string
+    color: string
+  }
+</script>
+
+<script lang="ts">
+  import { createToaster } from "@melt-ui/svelte"
+  import { flip } from "svelte/animate"
+  import Toast from "./toast.svelte"
+
+  const {
+    elements,
+    helpers: { addToast },
+    states: { toasts },
+    actions: { portal },
+  } = createToaster<ToastData>()
+
+  // an example using the default values
+  function create() {
+    addToast({
+      data: {
+        title: "Success",
+        description: "The resource was created!",
+        color: "bg-green-500",
+      },
+    })
+  }
+
+  // an example overriding the default values
+  function createImportant() {
+    addToast({
+      data: {
+        title: "Important",
+        description: "Important!!",
+        color: "bg-red-500",
+      },
+      closeDelay: 10000, // override the default closeDelay
+      type: "foreground", // override the default type
+    })
+  }
+</script>
+
+<button
+  class="inline-flex items-center justify-center rounded-xl bg-white px-4 py-3
+font-medium leading-none text-magnum-700 shadow hover:opacity-75"
+  on:click={create}
+>
+  Create
+</button>
+
+<button
+  class="inline-flex items-center justify-center rounded-xl bg-white px-4 py-3
+font-medium leading-none text-magnum-700 shadow hover:opacity-75"
+  on:click={createImportant}
+>
+  Create Important
+</button>
+
+<div
+  class="fixed right-0 top-0 z-50 m-4 flex flex-col items-end gap-2 md:bottom-0 md:top-auto"
+  use:portal
+>
+  {#each $toasts as toast (toast.id)}
+    <div animate:flip={{ duration: 500 }}>
+      <Toast {elements} {toast} />
+    </div>
+  {/each}
+</div>

src/lib/components/ui/Toast/index.ts

@@ -0,0 +1 @@
+export { default as Toast } from  './toast.svelte'

src/lib/components/ui/Toast/toast.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import {
+    createProgress,
+    melt,
+    type Toast,
+    type ToastsElements,
+  } from "@melt-ui/svelte"
+  import { createToaster } from "@melt-ui/svelte"
+  import { flip } from "svelte/animate"
+  import { X } from "lucide-svelte"
+  import { writable } from "svelte/store"
+  import { onMount } from "svelte"
+
+  const {
+    elements,
+    helpers: { addToast },
+    states: { toasts },
+    actions: { portal },
+  } = createToaster<ToastData>()
+
+  function create() {
+    addToast({
+      data: {
+        title: "Success",
+        description: "The resource was created NOT!",
+        color: "green",
+      },
+    })
+  }
+</script>
+
+<button on:click={create}> Create </button>
+<div
+  class="fixed right-0 top-0 z-50 m-4 flex flex-col items-end gap-2 md:bottom-0 md:top-auto"
+  use:portal
+>
+  {#each $toasts as toast (toast.id)}
+    <div animate:flip={{ duration: 500 }}>
+      <div>
+        <h3 class="flex items-center gap-2 font-semibold">kora</h3>
+        <div>{create}</div>
+      </div>
+    </div>
+  {/each}
+</div>

src/lib/components/ui/Toast/toast_complex.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+  import {
+    createProgress,
+    melt,
+    type Toast,
+    type ToastsElements,
+  } from "@melt-ui/svelte"
+  import { fly } from "svelte/transition"
+  import type { ToastData } from "./index.svelte"
+  import { X } from "lucide-svelte"
+  import { writable } from "svelte/store"
+  import { onMount } from "svelte"
+
+  export let elements: ToastsElements
+  $: ({ content, title, description, close } = elements)
+
+  export let toast: Toast<ToastData>
+  $: ({ data, id, getPercentage } = toast)
+
+  const percentage = writable(0)
+  const {
+    elements: { root: progress },
+    options: { max },
+  } = createProgress({
+    max: 100,
+    value: percentage,
+  })
+
+  onMount(() => {
+    let frame: number
+    const updatePercentage = () => {
+      percentage.set(getPercentage())
+      frame = requestAnimationFrame(updatePercentage)
+    }
+    frame = requestAnimationFrame(updatePercentage)
+
+    return () => cancelAnimationFrame(frame)
+  })
+</script>
+
+<div
+  use:melt={$content(id)}
+  in:fly={{ duration: 150, x: "100%" }}
+  out:fly={{ duration: 150, x: "100%" }}
+  class="relative rounded-lg bg-neutral-800 text-white shadow-md"
+>
+  <div
+    use:melt={$progress}
+    class="absolute left-5 top-2 h-1 w-[10%] overflow-hidden rounded-full bg-black/40"
+  >
+    <div
+      class="h-full w-full bg-magnum-500"
+      style={`transform: translateX(-${
+        100 - (100 * ($percentage ?? 0)) / ($max ?? 1)
+      }%)`}
+    />
+  </div>
+
+  <div
+    class="relative flex w-[24rem] max-w-[calc(100vw-2rem)] items-center justify-between gap-4 p-5 pt-6"
+  >
+    <div>
+      <h3 use:melt={$title(id)} class="flex items-center gap-2 font-semibold">
+        {data.title}
+        <span class="size-1.5 rounded-full {data.color}" />
+      </h3>
+      <div use:melt={$description(id)}>
+        {data.description}
+      </div>
+    </div>
+    <button
+      use:melt={$close(id)}
+      class="absolute right-4 top-4 grid size-6 place-items-center rounded-full text-magnum-500
+            hover:bg-magnum-900/50"
+    >
+      <X class="size-4" />
+    </button>
+  </div>
+</div>

src/lib/components/ui/collapsible.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { createCollapsible, melt } from "@melt-ui/svelte"
+  const {
+    elements: { root, content, trigger },
+    states: { open },
+  } = createCollapsible()
+</script>
+
+<div class="rounded-md p-4 text-orange-500 shadow-sm" use:melt={$root}>
+  <button use:melt={$trigger}>{$open ? "Close" : "Open"}</button>
+  <div use:melt={$content}>Obi-Wan says: Hello there!</div>
+</div>