@softwareone/spi-sv5-library 0.0.3 → 0.0.5

package/README.md

@@ -14,10 +14,11 @@ npm install @softwareone/swo-spi-svelte5-library
 Import the components you need into your Svelte application:
 
 ```javascript
-import { Button, Modal, Spinner } from '@softwareone/swo-spi-svelte5-library';
+import { Button, Modal, Spinner, Toaster, addToast, type Toast } from '@softwareone/swo-spi-svelte5-library';
 ```
 
 # List of components
 - Button
 - Modal
 - Spinner
+- Toaster

package/dist/Button/Button.svelte

@@ -4,18 +4,20 @@
         variant?: 'primary' | 'danger';
         disabled?: boolean
         onClick?: () => void;
+        name?: any;
     }
 
-    let { type, variant, disabled, onClick }: ButtonProps = $props();
+    let { type, variant, disabled, onClick, name }: ButtonProps = $props();
 
     type = type || 'primary';
     variant = variant || 'primary';
     disabled = disabled || false;
+    name = name || 'Button';
 
     let className = `btn-${type}-${variant}`;
 </script>
 
-<button class={className} disabled={disabled} onclick={onClick}>Button</button>
+<button class={className} disabled={disabled} onclick={onClick}>{name}</button>
 
 <style>
     .btn-primary-primary,

package/dist/Button/Button.svelte.d.ts

@@ -3,6 +3,7 @@ interface ButtonProps {
     variant?: 'primary' | 'danger';
     disabled?: boolean;
     onClick?: () => void;
+    name?: any;
 }
 declare const Button: import("svelte").Component<ButtonProps, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/Toast/Toast.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	import { getToast } from './toastState.svelte';
+
+	let { duration }:{duration?: number | undefined} = $props();
+
+	const toast = getToast(duration);
+
+	const getToastColor = (type: string): string => {
+		const colors: Record<string, string> = {
+			info: '#472AFF',
+			warning: '#E87D1E',
+			danger: '#DC182C',
+			neutral: '#6B7180',
+			success: '#008556'
+		};
+		return colors[type] || '#6B7180'; // Default to neutral if type is unknown
+	};
+
+</script>
+
+{#if toast.msg.length > 0}
+	<div class="toast-container">
+		{#each toast.msg as msg}
+			<div class="toast">
+				<div>
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="8"
+						height="36"
+						viewBox="0 0 8 36"
+						fill="none"
+					>
+						<rect width="8" height="36" rx="4" fill={getToastColor(msg.type)} />
+					</svg>
+				</div>
+				<div class="toast-content">
+					<div>{msg.message}</div>
+					<div class="toast-content-link">View details</div>
+				</div>
+			</div>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.toast-container {
+		position: fixed;
+		top: 16px;
+		right: 16px;
+		z-index: 9999;
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+	.toast {
+		display: inline-flex;
+		padding: 8px;
+		justify-content: flex-start;
+		align-items: center;
+		gap: 16px;
+		border-radius: 8px;
+		border: 1px solid var(--gray-2, #e0e5e8);
+		background: var(--brand-white, #fff);
+		/* shadow/dropdown */
+		box-shadow:
+			0px 4px 5px 0px rgba(51, 56, 64, 0.15),
+			0px 1px 3px 0px rgba(51, 56, 64, 0.2),
+			0px 1px 16px 0px rgba(51, 56, 64, 0.1);
+	}
+	.toast-content {
+		display: flex;
+		padding: 8px 0px;
+		align-items: flex-start;
+		gap: 8px;
+		color: var(--brand-type, #000);
+
+		/* regular/2 */
+		font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+	}
+	.toast-content-link {
+		display: flex;
+		align-items: flex-start;
+		color: var(--alerts-info-4, #2b1999);
+		font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px; /* 142.857% */
+	}
+	.toast-content-link:hover {
+		color: var(--brand-primary, #472aff);
+		text-decoration: underline;
+	}
+</style>

package/dist/Toast/Toast.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    duration?: number | undefined;
+};
+declare const Toast: import("svelte").Component<$$ComponentProps, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/Toast/toastState.svelte.d.ts

@@ -0,0 +1,14 @@
+type ToastType = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export interface Toast {
+    type: ToastType;
+    message: string;
+}
+interface ToastState extends Toast {
+    id: string;
+}
+export declare function getToast(duration?: number): {
+    msg: ToastState[];
+    duration: number;
+};
+export declare function addToast(toast: Toast): void;
+export {};

package/dist/Toast/toastState.svelte.js

@@ -0,0 +1,20 @@
+const toastState = $state({
+    msg: [],
+    duration: 5000,
+});
+export function getToast(duration) {
+    if (duration) {
+        toastState.duration = duration;
+    }
+    return toastState;
+}
+export function addToast(toast) {
+    const newToast = { ...toast, id: crypto.randomUUID() };
+    toastState.msg.push(newToast);
+    scheduleToastRemoval(newToast.id);
+}
+function scheduleToastRemoval(id) {
+    setTimeout(() => {
+        toastState.msg = toastState.msg.filter((toast) => toast.id !== id);
+    }, toastState.duration);
+}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 import Button from "./Button/Button.svelte";
 import Modal from "./Modal/Modal.svelte";
 import Spinner from "./Spinner/Spinner.svelte";
-export { Button, Modal, Spinner };
+import Toaster from "./Toast/Toast.svelte";
+import { addToast, type Toast } from "./Toast/toastState.svelte";
+export { Button, Modal, Spinner, Toaster, addToast, type Toast };

package/dist/index.js

@@ -2,4 +2,6 @@
 import Button from "./Button/Button.svelte";
 import Modal from "./Modal/Modal.svelte";
 import Spinner from "./Spinner/Spinner.svelte";
-export { Button, Modal, Spinner };
+import Toaster from "./Toast/Toast.svelte";
+import { addToast } from "./Toast/toastState.svelte";
+export { Button, Modal, Spinner, Toaster, addToast };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "0.0.3",
+	"version": "0.0.5",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",