@softwareone/spi-sv5-library 1.0.0 → 1.1.0

package/dist/Search/Search.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	type Props = {
+		value?: string;
+		placeholder?: string;
+		disabled?: boolean;
+		onclear?: () => void;
+	} & Omit<HTMLInputAttributes, 'value' | 'type'>;
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Search',
+		disabled = false,
+		onclear,
+		...props
+	}: Props = $props();
+
+	const hasValue = $derived(!!value);
+
+	const handleClear = () => {
+		value = '';
+		onclear?.();
+	};
+
+	const handleKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Escape' && hasValue) {
+			handleClear();
+			event.preventDefault();
+		}
+	};
+</script>
+
+<div class="search-container" class:disabled>
+	<div class="search-wrapper">
+		<span class="material-icons-outlined search-icon" aria-hidden="true">search</span>
+		<input
+			type="search"
+			class="search-input"
+			bind:value
+			{placeholder}
+			{disabled}
+			onkeydown={handleKeydown}
+			{...props}
+		/>
+
+		{#if hasValue && !disabled}
+			<button type="button" class="clear-button" onclick={handleClear} aria-label="Clear search">
+				<span class="material-icons-outlined" aria-hidden="true">close</span>
+			</button>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.search-container {
+		position: relative;
+		font-size: 14px;
+		line-height: 20px;
+	}
+
+	.search-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		border-radius: 8px;
+		border: 1px solid #6b7180;
+		background: #fff;
+		transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+	}
+
+	.search-wrapper:hover:not(:has(.search-input:disabled)),
+	.search-wrapper:focus-within {
+		border-color: #472aff;
+		box-shadow: 0 0 0 3px rgba(149, 155, 255, 0.3);
+	}
+
+	.search-input {
+		width: 100%;
+		padding: 8px 40px 8px 40px;
+		border: none;
+		background: transparent;
+		font-size: 14px;
+		color: #000;
+	}
+
+	.search-input:focus {
+		outline: none;
+	}
+
+	.search-input::placeholder {
+		color: #6b7180;
+	}
+
+	.search-input::-webkit-search-cancel-button,
+	.search-input::-webkit-search-decoration {
+		-webkit-appearance: none;
+	}
+
+	.search-icon,
+	.clear-button {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+		color: #6b7180;
+		font-size: 18px;
+	}
+
+	.search-icon {
+		left: 12px;
+		pointer-events: none;
+	}
+
+	.clear-button {
+		right: 12px;
+		background: none;
+		border: none;
+		padding: 4px;
+		cursor: pointer;
+		border-radius: 4px;
+		transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.clear-button:hover,
+	.clear-button:focus {
+		color: #000;
+		background-color: #f3f4f6;
+		outline: none;
+	}
+
+	.clear-button span {
+		font-size: 16px;
+	}
+
+	.disabled .search-wrapper {
+		border-color: #d1d5db;
+		background-color: #f3f4f6;
+	}
+
+	.disabled .search-input {
+		color: #6b7180;
+		cursor: not-allowed;
+	}
+
+	@media (max-width: 640px) {
+		.search-input {
+			font-size: 16px;
+		}
+	}
+</style>

package/dist/Search/Search.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = {
+    value?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    onclear?: () => void;
+} & Omit<HTMLInputAttributes, 'value' | 'type'>;
+declare const Search: import("svelte").Component<Props, {}, "value">;
+type Search = ReturnType<typeof Search>;
+export default Search;

package/dist/Toast/Toast.svelte

@@ -1,47 +1,47 @@
 <script lang="ts">
-	import { fly } from 'svelte/transition';
 	import { linear } from 'svelte/easing';
-	import { getToast } from './toastState.svelte';
+	import { fly, type FlyParams } from 'svelte/transition';
+
+	import { deleteToastById, getToast } from './toastState.svelte.js';
 
 	interface ToastProps {
 		duration?: number;
 	}
 
-	let { duration }:ToastProps = $props();
+	let { duration }: ToastProps = $props();
 
-	const toast = getToast(duration);
+	const TRANSITION_DURATION = 100;
+	const VERTICAL_DISTANCE = 8;
 
-	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
+	const transitionConfig: FlyParams = {
+		duration: TRANSITION_DURATION,
+		easing: linear,
+		y: VERTICAL_DISTANCE
 	};
 
+	const toastNotifications = getToast(duration);
 </script>
 
-{#if toast.msg.length > 0}
-	<div class="toast-container" in:fly={{ y: 100, duration: 100, easing: linear }} out:fly={{ y: 100, duration: 100, easing: linear }}>
-		{#each toast.msg as msg}
-			<div class="toast" in:fly={{ y: 100, duration: 100, easing: linear }} out:fly={{ y: 100, duration: 100, easing: linear }}>
-				<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>
+{#if toastNotifications.toasts.length > 0}
+	<div class="toast-container" in:fly={transitionConfig} out:fly={transitionConfig}>
+		{#each toastNotifications.toasts as toast}
+			<div class="toast {toast.width ?? 'sm'}" in:fly={transitionConfig} out:fly={transitionConfig}>
+				<span class="status-indicator {toast.type}"></span>
+				<div class="toast-content-container">
+					<div class="toast-content">
+						<span>{toast.message}</span>
+						{#if toast.link}
+							<a class="toast-content-link" href={toast.link} title="View details">View details</a>
+						{/if}
+					</div>
 				</div>
-				<div class="toast-content">
-					<div>{msg.message}</div>
-					<div class="toast-content-link">View details</div>
+				<div class="toast-close-container">
+					<button
+						type="button"
+						class="toast-close-button material-icons"
+						aria-label="Close toast"
+						onclick={() => deleteToastById(toast.id)}>close</button
+					>
 				</div>
 			</div>
 		{/each}
@@ -50,19 +50,21 @@
 
 <style>
 	.toast-container {
-		position: fixed; 
+		position: fixed;
 		top: 96px;
 		right: 16px;
 		z-index: 9999;
 		display: flex;
 		flex-direction: column;
 		gap: 16px;
+		align-items: flex-end;
 	}
+
 	.toast {
+		width: var(--toast-width);
+		height: var(--toast-height);
 		display: inline-flex;
 		padding: 8px;
-		justify-content: flex-start;
-		align-items: center;
 		gap: 16px;
 		border-radius: 8px;
 		border: 1px solid #e0e5e8;
@@ -72,28 +74,98 @@
 			0px 1px 3px 0px rgba(51, 56, 64, 0.2),
 			0px 1px 16px 0px rgba(51, 56, 64, 0.1);
 	}
+
+	.toast.sm {
+		--toast-width: 400px;
+		--toast-height: 52px;
+		--toast-flex-direction: row;
+		--toast-gap: 8px;
+		--toast-close-button-align: center;
+	}
+
+	.toast.md {
+		--toast-width: 600px;
+		--toast-height: 88px;
+		--toast-flex-direction: column;
+		--toast-gap: 4px;
+		--toast-close-button-align: flex-start;
+	}
+
 	.toast-content {
 		display: flex;
+		justify-content: space-between;
+		flex-direction: var(--toast-flex-direction);
+		gap: var(--toast-gap);
 		padding: 8px 0px;
-		align-items: flex-start;
-		gap: 8px;
 		color: #000;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
 		line-height: 20px;
 	}
+
+	.toast-content-container {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		flex-grow: 1;
+	}
+
+	.status-indicator {
+		width: 8px;
+		height: calc(var(--toast-height) - 20px);
+		flex-shrink: 0;
+		border-radius: 4px;
+		background-color: var(--toast-bg);
+	}
+
 	.toast-content-link {
 		display: flex;
-		align-items: flex-start;
+		align-items: center;
 		color: #2b1999;
 		font-size: 14px;
-		font-style: normal;
 		font-weight: 400;
 		line-height: 20px;
 	}
+
 	.toast-content-link:hover {
 		color: #472aff;
 		text-decoration: underline;
 	}
+
+	.status-indicator.info {
+		--toast-bg: #472aff;
+	}
+
+	.status-indicator.warning {
+		--toast-bg: #e87d1e;
+	}
+	.status-indicator.danger {
+		--toast-bg: #dc182c;
+	}
+	.status-indicator.neutral {
+		--toast-bg: #6b7180;
+	}
+	.status-indicator.success {
+		--toast-bg: #008556;
+	}
+
+	.toast-close-container {
+		display: flex;
+		align-items: var(--toast-close-button-align);
+	}
+
+	.toast-close-button {
+		background: none;
+		border: none;
+	}
+
+	.toast-close-button:hover {
+		cursor: pointer;
+		color: #434952;
+	}
+
+	.toast-close-button:focus {
+		outline: none;
+	}
 </style>

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

@@ -1,14 +1,18 @@
 type ToastType = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+type ToastWidth = 'sm' | 'md';
 export interface Toast {
     type: ToastType;
     message: string;
+    width?: ToastWidth;
+    link?: string;
 }
 interface ToastState extends Toast {
     id: string;
 }
-export declare function getToast(duration?: number): {
-    msg: ToastState[];
+export declare const getToast: (duration?: number) => {
+    toasts: ToastState[];
     duration: number;
 };
-export declare function addToast(toast: Toast): void;
+export declare const addToast: (toast: Toast) => void;
+export declare const deleteToastById: (id: string) => void;
 export {};

package/dist/Toast/toastState.svelte.js

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

package/dist/index.d.ts

@@ -8,8 +8,8 @@ import { ChipType } from './Chips/chipsState.svelte.js';
 import ErrorPage from './ErrorPage/ErrorPage.svelte';
 import Footer from './Footer/Footer.svelte';
 import Input from './Form/Input/Input.svelte';
-import Toggle from './Form/Toggle/Toggle.svelte';
 import TextArea from './Form/TextArea/TextArea.svelte';
+import Toggle from './Form/Toggle/Toggle.svelte';
 import Header from './Header/Header.svelte';
 import HeaderAccount from './Header/HeaderAccount.svelte';
 import HeaderLoader from './Header/HeaderLoader.svelte';
@@ -20,11 +20,14 @@ import Menu from './Menu/Menu.svelte';
 import Sidebar from './Menu/Sidebar.svelte';
 import type { MenuItem } from './Menu/SidebarState.svelte';
 import Modal from './Modal/Modal.svelte';
+import type { ModalProps } from './Modal/modalState.svelte.js';
 import ProgressWizard from './ProgressWizard/ProgressWizard.svelte';
+import type { ProgressWizardStep } from './ProgressWizard/progressWizardState.svelte.js';
+import Search from './Search/Search.svelte';
 import Spinner from './Spinner/Spinner.svelte';
 import Tabs from './Tabs/Tabs.svelte';
 import type { Tab } from './Tabs/tabsState.svelte.js';
 import Toaster from './Toast/Toast.svelte';
 import { addToast, type Toast } from './Toast/toastState.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
-export { addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, TextArea, Modal, ProgressWizard, Sidebar, Spinner, Tabs, Toaster, Toggle, Tooltip, type BreadcrumbsNameMap, type HighlightPanelColumn, type MenuItem, type Tab, type Toast };
+export { addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, Modal, ProgressWizard, Search, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip, type BreadcrumbsNameMap, type HighlightPanelColumn, type MenuItem, type ModalProps, type ProgressWizardStep, type Tab, type Toast };

package/dist/index.js

@@ -8,8 +8,8 @@ import { ChipType } from './Chips/chipsState.svelte.js';
 import ErrorPage from './ErrorPage/ErrorPage.svelte';
 import Footer from './Footer/Footer.svelte';
 import Input from './Form/Input/Input.svelte';
-import Toggle from './Form/Toggle/Toggle.svelte';
 import TextArea from './Form/TextArea/TextArea.svelte';
+import Toggle from './Form/Toggle/Toggle.svelte';
 import Header from './Header/Header.svelte';
 import HeaderAccount from './Header/HeaderAccount.svelte';
 import HeaderLoader from './Header/HeaderLoader.svelte';
@@ -20,9 +20,10 @@ import Menu from './Menu/Menu.svelte';
 import Sidebar from './Menu/Sidebar.svelte';
 import Modal from './Modal/Modal.svelte';
 import ProgressWizard from './ProgressWizard/ProgressWizard.svelte';
+import Search from './Search/Search.svelte';
 import Spinner from './Spinner/Spinner.svelte';
 import Tabs from './Tabs/Tabs.svelte';
 import Toaster from './Toast/Toast.svelte';
 import { addToast } from './Toast/toastState.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
-export { addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, TextArea, Modal, ProgressWizard, Sidebar, Spinner, Tabs, Toaster, Toggle, Tooltip };
+export { addBreadcrumbsNameMap, addToast, Avatar, Breadcrumbs, Button, Card, Chips, ChipType, ColumnType, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, ImageType, Input, Menu, Modal, ProgressWizard, Search, Sidebar, Spinner, Tabs, TextArea, Toaster, Toggle, Tooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",
@@ -55,12 +55,10 @@
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"typescript": "^5.0.0",
-		"vite": "^6.0.0"
+		"vite": "^6.0.0",
+		"zod": "^3.25.76"
 	},
 	"dependencies": {
-		"@sveltejs/kit": "^2.16.0",
-		"http-status-codes": "^2.3.0",
-		"lucide-svelte": "^0.475.0",
-		"zod": "^3.24.4"
+		"@sveltejs/kit": "^2.16.0"
 	}
 }