@softwareone/spi-sv5-library 0.1.3 → 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/Tabs/Tabs.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { Tab } from '../index.js';
+
+	interface TabsProps {
+		tabs: Tab[];
+		activeTab?: number;
+	}
+
+	let { tabs = [], activeTab = 0 }: TabsProps = $props();
+
+	const handleClick = (index: number) => (): void => {
+		activeTab = index;
+	};
+</script>
+
+<div class="tabs-container">
+	<div class="tabs-list" role="tablist" aria-label="tabs">
+		{#each tabs as tab}
+			{#if !tab.hidden}
+				{@const isActiveTab = activeTab === tab.index}
+				<button
+					id="tab-{tab.index}"
+					role="tab"
+					aria-selected={isActiveTab}
+					aria-controls="panel-{tab.index}"
+					tabindex={isActiveTab ? 0 : -1}
+					type="button"
+					class:active={isActiveTab}
+					onclick={handleClick(tab.index)}
+				>
+					{tab.label}
+				</button>
+			{/if}
+		{/each}
+	</div>
+
+	{#each tabs as tab}
+		{#if activeTab === tab.index}
+			<div
+				class="tabs-content"
+				id="panel-{tab.index}"
+				role="tabpanel"
+				aria-labelledby="tab-{tab.index}"
+			>
+				{@render tab.component?.()}
+			</div>
+		{/if}
+	{/each}
+</div>
+
+<style>
+	.tabs-container {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.tabs-list {
+		display: flex;
+		gap: 16px;
+		border-bottom: 1px solid #e0e5e8;
+	}
+
+	.tabs-list button {
+		border-radius: 8px;
+		background-color: #fff;
+		padding: 20px 16px 20px;
+		position: relative;
+		border: none;
+		font-size: 16px;
+	}
+
+	.tabs-list button:hover {
+		background-color: #f4f6f8;
+		cursor: pointer;
+	}
+
+	.tabs-list button.active {
+		color: #472aff;
+	}
+
+	.tabs-list button::after {
+		content: '';
+		position: absolute;
+		left: 50%;
+		bottom: -2px;
+		width: 0;
+		height: 4px;
+		background-color: #472aff;
+		border-radius: 8px;
+		transform: translateX(-50%);
+	}
+
+	.tabs-list button:hover::after,
+	.tabs-list button.active::after {
+		width: 90%;
+	}
+
+	.tabs-content {
+		width: 100%;
+		height: 100%;
+		position: relative;
+		border-radius: 0px 0px 16px 16px;
+		overflow: hidden;
+		padding: 24px;
+		box-sizing: border-box;
+		min-height: 300px;
+		text-align: left;
+		font-size: 18px;
+	}
+</style>

package/dist/Tabs/Tabs.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Tab } from '../index.js';
+interface TabsProps {
+    tabs: Tab[];
+    activeTab?: number;
+}
+declare const Tabs: import("svelte").Component<TabsProps, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/Tabs/tabsState.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+export interface Tab {
+    index: number;
+    label: string;
+    component?: Snippet;
+    hidden?: boolean;
+}

package/dist/Tabs/tabsState.svelte.js

@@ -0,0 +1 @@
+export {};

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,55 +50,122 @@
 
 <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 var(--gray-2, #e0e5e8);
-		background: var(--brand-white, #fff);
-		/* shadow/dropdown */
+		border: 1px solid #e0e5e8;
+		background: #fff;
 		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.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: var(--brand-type, #000);
-
-		/* regular/2 */
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+		color: #000;
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
-		line-height: 20px; /* 142.857% */
+		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;
-		color: var(--alerts-info-4, #2b1999);
-		font-family: 'Haas Grotesk Display Pro', sans-serif;
+		align-items: center;
+		color: #2b1999;
 		font-size: 14px;
-		font-style: normal;
 		font-weight: 400;
-		line-height: 20px; /* 142.857% */
+		line-height: 20px;
 	}
+
 	.toast-content-link:hover {
-		color: var(--brand-primary, #472aff);
+		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);
+};