@joyautomation/salt 0.0.14 → 0.0.16

package/dist/components/Toast.svelte

@@ -1,22 +1,24 @@
 <script lang="ts">
-	import { page } from '$app/stores'
-	import {
-		notifications,
-		type Notification,
-		addNotification
-	} from '../state/notifications.svelte.js'
+	import { page } from '$app/state'
+	import { notifications, addNotification } from '../state/notifications.svelte'
 	import { slide } from 'svelte/transition'
 
-	let queue = $derived(notifications.current)
+	let lastProcessedTime = 0
+
 	$effect(() => {
-		if ($page.form && $page.form?.message) {
-			addNotification($page.form)
+		const formData = page.form
+		const now = Date.now()
+		// Only process if we have new form data with a message
+		// and enough time has passed since the last notification (e.g., 50ms)
+		if (formData?.message && now - lastProcessedTime > 50) {
+			lastProcessedTime = now
+			addNotification(formData)
 		}
 	})
 </script>
 
 <div class="toast">
-	{#each queue as notification}
+	{#each notifications.current as notification}
 		<div
 			class:toast--success={notification.type === 'success'}
 			class:toast--error={notification.type === 'error'}

package/dist/state/notifications.svelte.d.ts

@@ -10,4 +10,4 @@ export interface Notification {
 export declare const notifications: {
     current: Notification[];
 };
-export declare function addNotification(notification: NotificationInput): void;
+export declare function addNotification(notification: NotificationInput): string;

package/dist/state/notifications.svelte.js

@@ -16,4 +16,5 @@ export function addNotification(notification) {
     setTimeout(() => {
         notifications.current = notifications.current.filter((n) => n.id !== id);
     }, 5000);
+    return id;
 }

package/dist/styles/main.scss

@@ -1,13 +1,13 @@
-@import './preflight.scss';
-@import './spacing.scss';
-@import './colors.scss';
-@import './layout.scss';
-@import './shadow.scss';
-@import './rounded.scss';
-@import './text.scss';
-@import './buttons.scss';
-@import './themes.scss';
-@import './form.scss';
+@use './preflight.scss';
+@use './spacing.scss';
+@use './colors.scss';
+@use './layout.scss';
+@use './shadow.scss';
+@use './rounded.scss';
+@use './text.scss';
+@use './buttons.scss';
+@use './themes.scss';
+@use './form.scss';
 
 body {
   font-family: var(--theme-font-basic);

package/dist/styles/themes.scss

@@ -1,3 +1,5 @@
+@use 'sass:meta';
+
 $themes: (
   "themeLight": (
     "theme-font-basic": "'Space Grotesk', sans-serif",
@@ -80,7 +82,7 @@ $themes: (
     @each $property, $value in $theme-map {
 
       // Check if the value is a nested map (like for 'neutral')
-      @if (type-of($value)=='map') {
+      @if (meta.type-of($value)=='map') {
         @each $nested-key, $nested-value in $value {
           --#{$property}-#{$nested-key}: #{$nested-value};
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joyautomation/salt",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "exports": {
     ".": [
       "./dist/index.js",