@dargmuesli/nuxt-vio 19.1.0 → 20.0.0-beta.2

package/app/assets/css/shadcn.css

@@ -0,0 +1,119 @@
+/* stylelint-disable at-rule-no-unknown */
+/* stylelint-disable plugin/no-unsupported-browser-features */
+
+.dark {
+  --background: oklch(14.5% 0 0deg);
+  --foreground: oklch(98.5% 0 0deg);
+  --card: oklch(20.5% 0 0deg);
+  --card-foreground: oklch(98.5% 0 0deg);
+  --popover: oklch(20.5% 0 0deg);
+  --popover-foreground: oklch(98.5% 0 0deg);
+  --primary: oklch(92.2% 0 0deg);
+  --primary-foreground: oklch(20.5% 0 0deg);
+  --secondary: oklch(26.9% 0 0deg);
+  --secondary-foreground: oklch(98.5% 0 0deg);
+  --muted: oklch(26.9% 0 0deg);
+  --muted-foreground: oklch(70.8% 0 0deg);
+  --accent: oklch(26.9% 0 0deg);
+  --accent-foreground: oklch(98.5% 0 0deg);
+  --destructive: oklch(70.4% 0.191 22.216deg);
+  --border: oklch(100% 0 0deg / 10%);
+  --input: oklch(100% 0 0deg / 15%);
+  --ring: oklch(55.6% 0 0deg);
+  --chart-1: oklch(48.8% 0.243 264.376deg);
+  --chart-2: oklch(69.6% 0.17 162.48deg);
+  --chart-3: oklch(76.9% 0.188 70.08deg);
+  --chart-4: oklch(62.7% 0.265 303.9deg);
+  --chart-5: oklch(64.5% 0.246 16.439deg);
+  --sidebar: oklch(20.5% 0 0deg);
+  --sidebar-foreground: oklch(98.5% 0 0deg);
+  --sidebar-primary: oklch(48.8% 0.243 264.37deg);
+  --sidebar-primary-foreground: oklch(98.5% 0 0deg);
+  --sidebar-accent: oklch(26.9% 0 0deg);
+  --sidebar-accent-foreground: oklch(98.5% 0 0deg);
+  --sidebar-border: oklch(100% 0 0deg / 10%);
+  --sidebar-ring: oklch(55.6% 0 0deg);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(100% 0 0deg);
+  --foreground: oklch(14.5% 0 0deg);
+  --card: oklch(100% 0 0deg);
+  --card-foreground: oklch(14.5% 0 0deg);
+  --popover: oklch(100% 0 0deg);
+  --popover-foreground: oklch(14.5% 0 0deg);
+  --primary: oklch(20.5% 0 0deg);
+  --primary-foreground: oklch(98.5% 0 0deg);
+  --secondary: oklch(97% 0 0deg);
+  --secondary-foreground: oklch(20.5% 0 0deg);
+  --muted: oklch(97% 0 0deg);
+  --muted-foreground: oklch(55.6% 0 0deg);
+  --accent: oklch(97% 0 0deg);
+  --accent-foreground: oklch(20.5% 0 0deg);
+  --destructive: oklch(57.7% 0.245 27.32deg);
+  --border: oklch(92.2% 0 0deg);
+  --input: oklch(92.2% 0 0deg);
+  --ring: oklch(70.8% 0 0deg);
+  --chart-1: oklch(64.6% 0.222 41.11deg);
+  --chart-2: oklch(60% 0.118 184.7deg);
+  --chart-3: oklch(39.8% 0.07 227.39deg);
+  --chart-4: oklch(82.8% 0.189 84.42deg);
+  --chart-5: oklch(76.9% 0.188 70deg);
+  --sidebar: oklch(98.5% 0 0deg);
+  --sidebar-foreground: oklch(14.5% 0 0deg);
+  --sidebar-primary: oklch(20.5% 0 0deg);
+  --sidebar-primary-foreground: oklch(98.5% 0 0deg);
+  --sidebar-accent: oklch(97% 0 0deg);
+  --sidebar-accent-foreground: oklch(20.5% 0 0deg);
+  --sidebar-border: oklch(92.2% 0 0deg);
+  --sidebar-ring: oklch(70.8% 0 0deg);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/app/assets/css/vio.css

@@ -5,15 +5,17 @@
 /* stylelint-disable plugin/no-unsupported-browser-features */
 
 @import 'tailwindcss';
+@import 'tw-animate-css';
 @import './forms.css';
+@import './shadcn.css';
 
-@source "../../";
+@source '../../';
 
-@plugin "@tailwindcss/forms" {
+@plugin '@tailwindcss/forms' {
   strategy: 'base';
 }
 
-@plugin "@tailwindcss/typography";
+@plugin '@tailwindcss/typography';
 
 @custom-variant dark (&:where(.dark, .dark *));
 

package/app/components/scn/sonner/Sonner.vue

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import type { ToasterProps } from 'vue-sonner'
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+  XIcon,
+} from 'lucide-vue-next'
+import { Toaster as Sonner } from 'vue-sonner'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    :class="cn('toaster group', props.class)"
+    :style="{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+      '--border-radius': 'var(--radius)',
+    }"
+    v-bind="props"
+  >
+    <template #success-icon>
+      <CircleCheckIcon class="size-4" />
+    </template>
+    <template #info-icon>
+      <InfoIcon class="size-4" />
+    </template>
+    <template #warning-icon>
+      <TriangleAlertIcon class="size-4" />
+    </template>
+    <template #error-icon>
+      <OctagonXIcon class="size-4" />
+    </template>
+    <template #loading-icon>
+      <div>
+        <Loader2Icon class="size-4 animate-spin" />
+      </div>
+    </template>
+    <template #close-icon>
+      <XIcon class="size-4" />
+    </template>
+  </Sonner>
+</template>

package/app/components/scn/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from './Sonner.vue'

package/app/components/vio/_/VioApp.vue

@@ -5,6 +5,7 @@
       <!-- `NuxtLayout` can't have mulitple child nodes (https://github.com/nuxt/nuxt/issues/21759) -->
       <NuxtPage />
     </NuxtLayout>
+    <VioSonner />
   </div>
 </template>
 
@@ -16,26 +17,24 @@ const props = withDefaults(defineProps<Props>(), {
   ogImageComponent: undefined,
 })
 
-const { $dayjs } = useNuxtApp()
-const { locale, t } = useI18n()
+const { t } = useI18n()
+const timeZone = useTimeZone()
 
 const { loadingIds, indicateLoadingDone } = useLoadingDoneIndicator('app')
 
 // methods
 const initialize = () => {
-  $dayjs.locale(locale.value)
-
   if (import.meta.client) {
-    const cookieTimezone = useCookie(TIMEZONE_COOKIE_NAME, {
-      // default: () => undefined, // setting `default` on the client side only does not write the cookie
-      httpOnly: false,
-      sameSite: 'strict',
-      secure: true,
-    })
-    // @ts-expect-error `tz` should be part of `$dayjs` (https://github.com/iamkun/dayjs/issues/2106)
-    cookieTimezone.value = $dayjs.tz.guess()
+    saveTimeZoneAsCookie()
   }
 }
+const saveTimeZoneAsCookie = () =>
+  (useCookie(TIMEZONE_COOKIE_NAME, {
+    // default: () => undefined, // setting `default` on the client side only does not write the cookie
+    httpOnly: false,
+    sameSite: 'strict',
+    secure: true,
+  }).value = timeZone)
 
 // computations
 const isLoading = computed(() => !!loadingIds.value.length)

package/app/components/vio/_/VioSonner.vue

@@ -0,0 +1,16 @@
+<template>
+  <!-- TODO: add `class="pointer-events-auto"` -->
+  <Toaster rich-colors :theme="colorModePreference" />
+</template>
+
+<script setup lang="ts">
+import type { ColorMode } from '~/types/color-mode'
+
+const colorMode = useColorMode()
+
+const colorModePreference = colorMode.preference as ColorMode
+</script>
+
+<style>
+@import url('vue-sonner/style.css');
+</style>

package/app/components/vio/_/VioTime.vue

@@ -0,0 +1,34 @@
+<template>
+  <NuxtTime
+    v-bind="forwardedProps"
+    :locale="props.locale || defaultLocale"
+    :time-zone="props.timeZone || defaultTimeZone"
+  />
+</template>
+
+<script setup lang="ts">
+import { reactiveOmit } from '@vueuse/core'
+import { useForwardProps } from 'reka-ui'
+
+import type { NuxtTimeProps } from '#app'
+
+const { locale: defaultLocale } = useI18n()
+const defaultTimeZone = useTimeZone()
+
+const props = withDefaults(defineProps<NuxtTimeProps>(), {
+  // ...dateTimeFormatOptions, TODO: use shared options
+  day: 'numeric',
+  hour: 'numeric',
+  locale: undefined,
+  minute: 'numeric',
+  month: 'short',
+  relative: undefined,
+  timeZone: undefined,
+  timeZoneName: undefined,
+  weekday: undefined,
+  year: 'numeric',
+})
+
+const delegatedProps = reactiveOmit(props, 'locale', 'timeZone')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>

package/app/components/vio/button/VioButtonShare.vue

@@ -26,7 +26,7 @@ const copy = async (string: string) => {
 
   try {
     await copyText(string)
-    showToast({ title: t('donationUrlCopySuccess') })
+    toast.success(t('donationUrlCopySuccess'))
   } catch (error: unknown) {
     console.error(error)
     alert(t('donationUrlCopyError'))

package/app/composables/alert.ts

@@ -1,17 +1,26 @@
 import { consola } from 'consola'
-import Swal from 'sweetalert2'
-import type { Ref } from 'vue'
 
-export const useFireError = () => {
+export const useAlertError = () => {
   const { t } = useI18n({ useScope: 'global' })
 
-  return ({ error }: { error: Error }, api?: Ref<{ errors: Error[] }>) => {
-    Swal.fire({
-      icon: 'error',
-      title: t('globalStatusError'),
-      text: error.message,
+  return (
+    options:
+      | string
+      | {
+          error?: Error
+          messageI18n: string
+          toastOptions?: Parameters<typeof toast>[1]
+        },
+  ) => {
+    const error =
+      typeof options === 'string' ? new Error(options) : options.error
+    const errorMessage =
+      typeof options === 'string' ? options : options.messageI18n
+
+    consola.error({ errorMessage, ...(error ? { error } : {}) })
+    toast.error(t('globalError'), {
+      ...(typeof options !== 'string' ? options.toastOptions || {} : {}),
+      description: errorMessage,
     })
-    api?.value.errors.push(error)
-    consola.error(error)
   }
 }

package/app/composables/timeZone.ts

@@ -0,0 +1,10 @@
+export const useTimeZone = () =>
+  useNuxtApp().ssrContext?.event.context.$timeZone ||
+  useCookie(TIMEZONE_COOKIE_NAME, {
+    httpOnly: false,
+    sameSite: 'strict',
+    secure: true,
+  }).value ||
+  (import.meta.client
+    ? Intl.DateTimeFormat().resolvedOptions().timeZone
+    : undefined)

package/app/plugins/ssr-width.ts

@@ -0,0 +1,5 @@
+import { provideSSRWidth } from '@vueuse/core'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  provideSSRWidth(1024, nuxtApp.vueApp)
+})

package/app/types/color-mode.d.ts

@@ -0,0 +1 @@
+export type ColorMode = 'dark' | 'light' | 'system'

package/app/utils/notification.ts

@@ -0,0 +1 @@
+export { toast } from 'vue-sonner'

package/app/utils/shadcn.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/i18n/locales/de.json

@@ -1,4 +1,5 @@
 {
+  "globalError": "Fehler",
   "globalSeoOgImageAlt": "Social Preview Image für eine Vio Webseite.",
   "globalPlaceholderEmailAddress": "e-mail{'@'}adres.se",
   "globalPlaceholderUrl": "https://websei.te",

package/i18n/locales/en.json

@@ -1,4 +1,5 @@
 {
+  "globalError": "Error",
   "globalSeoOgImageAlt": "Social Preview Image for a Vio webpage.",
   "globalPlaceholderEmailAddress": "email{'@'}addre.ss",
   "globalPlaceholderUrl": "https://websi.te",

package/nuxt.config.ts

@@ -1,3 +1,6 @@
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
 import tailwindcss from '@tailwindcss/vite'
 import { defu } from 'defu'
 
@@ -10,6 +13,8 @@ import {
 } from './shared/utils/constants'
 import { VIO_NUXT_BASE_CONFIG } from './shared/utils/nuxt'
 
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
 export default defineNuxtConfig(
   defu(
     {
@@ -50,6 +55,7 @@ export default defineNuxtConfig(
         '@nuxtjs/seo',
         '@pinia/nuxt',
         'nuxt-gtag',
+        'shadcn-nuxt',
         (_options, nuxt) => {
           if (nuxt.options.nitro.static) {
             nuxt.options.features.inlineStyles = false
@@ -237,6 +243,10 @@ export default defineNuxtConfig(
         },
         strict: true,
       },
+      shadcn: {
+        prefix: '',
+        componentDir: join(currentDir, './app/components/scn'),
+      },
       site: {
         url: SITE_URL,
       },
@@ -266,7 +276,6 @@ export default defineNuxtConfig(
         // modules
         security: {
           headers: {
-            crossOriginEmbedderPolicy: 'unsafe-none',
             strictTransportSecurity: false, // prevent endless reload in Chrome
           },
         },
@@ -291,6 +300,7 @@ export default defineNuxtConfig(
         },
         security: {
           headers: {
+            crossOriginEmbedderPolicy: 'require-corp', // breaks nuxt devtools
             strictTransportSecurity: {
               maxAge: 31536000,
               preload: true,

package/package.json

@@ -21,8 +21,10 @@
     "@urql/vue": "2.0.0",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
+    "@vueuse/core": "14.0.0",
+    "class-variance-authority": "0.7.1",
     "clipboardy": "5.0.1",
-    "dayjs": "2.0.0-alpha.4",
+    "clsx": "2.1.1",
     "eslint": "9.39.1",
     "eslint-config-prettier": "10.1.8",
     "eslint-plugin-compat": "6.0.2",
@@ -31,15 +33,20 @@
     "globals": "16.5.0",
     "jiti": "2.6.1",
     "jose": "6.1.2",
+    "lucide-vue-next": "0.554.0",
     "nuxt-gtag": "4.1.0",
     "nuxt-security": "2.5.0",
-    "sweetalert2": "11.26.3",
+    "shadcn-nuxt": "2.3.3",
+    "tailwind-merge": "3.4.0",
+    "tw-animate-css": "1.4.0",
+    "vue-sonner": "2.0.9",
     "vue-tsc": "3.1.5"
   },
   "devDependencies": {
     "@types/node": "24.10.1",
     "@urql/devtools": "2.0.3",
     "@urql/exchange-graphcache": "8.1.0",
+    "@vueuse/core": "14.0.0",
     "consola": "3.4.2",
     "defu": "6.1.4",
     "h3": "1.15.4",
@@ -48,6 +55,7 @@
     "pinia": "3.0.4",
     "prettier": "3.6.2",
     "prettier-plugin-tailwindcss": "0.7.1",
+    "reka-ui": "2.6.0",
     "serve": "14.2.5",
     "sharp": "0.34.5",
     "stylelint": "16.26.0",
@@ -106,5 +114,5 @@
     "start:static": "serve playground/.output/public --ssl-cert ./.config/certificates/ssl.crt --ssl-key ./.config/certificates/ssl.key"
   },
   "type": "module",
-  "version": "19.1.0"
+  "version": "20.0.0-beta.2"
 }

package/shared/utils/constants.ts

@@ -123,7 +123,7 @@ export const VIO_GET_CSP = ({ siteUrl }: { siteUrl: URL }) =>
         `${siteUrl}_nuxt/`, // bundle
       ],
       'style-src': [
-        "'unsafe-inline'", // TODO: replace with "'nonce-{{nonce}}'" once Sweetalert supports it
+        "'nonce-{{nonce}}'",
         "'self'", // TODO: `${siteUrl}_nuxt/`, // bundle
       ], // TODO: use `style-src-elem` once Playwright WebKit supports it
     },

package/shared/utils/dateTime.ts

@@ -0,0 +1,118 @@
+/**
+ * Calculates the duration between two dates in terms of years, months, weeks, days, hours, and minutes.
+ *
+ * This utility is useful for displaying human-readable differences between two timestamps.
+ * The returned object represents the absolute difference, regardless of the order of `from` and `to`.
+ *
+ * @param {Date} from - The starting date of the interval.
+ * @param {Date} to - The ending date of the interval.
+ * @returns {{ years: number, months: number, weeks: number, days: number, hours: number, minutes: number }}
+ * An object representing the time difference between the two dates:
+ * - `years`: Number of full years
+ * - `months`: Remaining full months after accounting for years
+ * - `weeks`: Remaining full weeks after accounting for months
+ * - `days`: Remaining days after accounting for weeks
+ * - `hours`: Remaining hours
+ * - `minutes`: Remaining minutes
+ *
+ * @example
+ * getDuration(new Date('2020-01-01'), new Date('2023-04-10'))
+ * // returns: { years: 3, months: 3, weeks: 1, days: 2, hours: 0, minutes: 0 }
+ */
+export const getDuration = (
+  from: Date,
+  to: Date,
+): {
+  days: number
+  hours: number
+  minutes: number
+  months: number
+  weeks: number
+  years: number
+} => {
+  const start = from > to ? to : from
+  const end = from > to ? from : to
+
+  let years = end.getUTCFullYear() - start.getUTCFullYear()
+  let months = end.getUTCMonth() - start.getUTCMonth()
+  let days = end.getUTCDate() - start.getUTCDate()
+  let hours = end.getUTCHours() - start.getUTCHours()
+  let minutes = end.getUTCMinutes() - start.getUTCMinutes()
+
+  if (minutes < 0) {
+    minutes += 60
+    hours--
+  }
+
+  if (hours < 0) {
+    hours += 24
+    days--
+  }
+
+  if (days < 0) {
+    const prevMonth = new Date(
+      Date.UTC(end.getUTCFullYear(), end.getUTCMonth(), 0),
+    )
+    days += prevMonth.getUTCDate()
+    months--
+  }
+
+  if (months < 0) {
+    months += 12
+    years--
+  }
+
+  const weeks = Math.floor(days / 7)
+  days = days % 7
+
+  return {
+    days,
+    hours,
+    minutes,
+    months,
+    weeks,
+    years,
+  }
+}
+
+/**
+ * Default date-time formatting options used for displaying timestamps in a concise and readable format.
+ *
+ * Format includes:
+ * - Day (numeric, e.g., "15")
+ * - Month (short name, e.g., "Jul")
+ * - Year (numeric, e.g., "2025")
+ * - Hour and minute (numeric, 12/24-hour based on locale, e.g., "6:00 PM")
+ * - Time zone name (short, e.g., "UTC", "PST")
+ *
+ * These options are intended to be used with `Intl.DateTimeFormat`.
+ */
+export const dateTimeFormatOptions: Intl.DateTimeFormatOptions = {
+  day: 'numeric',
+  hour: 'numeric',
+  minute: 'numeric',
+  month: 'short',
+  timeZoneName: 'short',
+  year: 'numeric',
+}
+
+/**
+ * Returns a date-time formatter function for use in emails which don't support targeted locales yet.
+ *
+ * The formatter uses the specified locale and a fixed UTC time zone.
+ *
+ * @param {string} locale - A BCP 47 language tag (e.g., "en-US", "fr-FR") used to format the date/time.
+ * @returns {Intl.DateTimeFormat} A formatter instance that formats dates in the specified locale and UTC time zone.
+ *
+ * @example
+ * const format = getEmailDateTimeFormatter('en-US')
+ * format.format(new Date('2025-07-15T18:00:00Z'))
+ * // → "Jul 15, 2025, 6:00 PM UTC"
+ */
+export const getEmailDateTimeFormatter = (
+  locale: string,
+): Intl.DateTimeFormat =>
+  Intl.DateTimeFormat(locale, {
+    ...dateTimeFormatOptions,
+    timeZone: 'UTC',
+  })

package/app/composables/dateTime.ts

@@ -1,9 +0,0 @@
-import type { Dayjs } from 'dayjs'
-
-export const useDateTime = () => {
-  const { $dayjs } = useNuxtApp()
-  const timezone = getTimezone()
-
-  return (dateTime?: string | number | Dayjs | Date | null) =>
-    $dayjs(dateTime).tz(timezone)
-}

package/app/plugins/dayjs.ts

@@ -1,30 +0,0 @@
-import dayjs from 'dayjs'
-import type { DayjsFn } from 'dayjs'
-
-import 'dayjs/locale/de'
-
-import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
-import localizedFormat from 'dayjs/plugin/localizedFormat'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import timezone from 'dayjs/plugin/timezone'
-import utc from 'dayjs/plugin/utc'
-
-export default defineNuxtPlugin((_nuxtApp) => {
-  dayjs.extend(isSameOrBefore)
-  dayjs.extend(localizedFormat)
-  dayjs.extend(relativeTime)
-  dayjs.extend(timezone)
-  dayjs.extend(utc)
-
-  return {
-    provide: {
-      dayjs,
-    },
-  }
-})
-
-declare module '#app' {
-  interface NuxtApp {
-    $dayjs: DayjsFn
-  }
-}

package/app/plugins/i18n.ts

@@ -1,5 +0,0 @@
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.hook('i18n:localeSwitched', ({ newLocale }) => {
-    nuxtApp.vueApp.$nuxt.$dayjs.locale(newLocale)
-  })
-})

package/shared/utils/modal.ts

@@ -1,16 +0,0 @@
-import Swal from 'sweetalert2'
-
-export const showToast = ({ title }: { title: string }) =>
-  Swal.fire({
-    didOpen: (toast) => {
-      toast.addEventListener('mouseenter', Swal.stopTimer)
-      toast.addEventListener('mouseleave', Swal.resumeTimer)
-    },
-    icon: 'success',
-    position: 'bottom-right',
-    showConfirmButton: false,
-    timer: 3000,
-    timerProgressBar: true,
-    title,
-    toast: true,
-  })