@softwareone/spi-sv5-library 1.14.4 → 1.15.0

package/dist/components/table/types.d.ts

@@ -6,13 +6,21 @@ export interface Action {
     isMainAction?: boolean;
     onClick: VoidFunction;
 }
-export interface Pagination {
+interface BasePagination {
     totalItems: number;
     totalPages: number;
+}
+export interface PagePagination extends BasePagination {
     currentPage: number;
 }
+export interface CursorPagination extends BasePagination {
+    nextCursor?: string | null;
+    prevCursor?: string | null;
+}
+export type Pagination = PagePagination | CursorPagination;
 export interface Filter {
     column: string;
     value: string;
     operation?: Operation;
 }
+export {};

package/dist/components/table/utils.d.ts

@@ -1,8 +1,12 @@
 import { type ColumnDef, type Row } from './adapter/index.js';
-import type { Action, Filter } from './types.js';
+import type { Action, CursorPagination, Filter, PagePagination, Pagination } from './types.js';
 export declare const createCheckedColumn: <T>() => import("./adapter/index.js").DisplayColumnDef<T, unknown>;
 export declare const createActionsColumn: <T>(getActions: (row: Row<T>) => Action[]) => import("./adapter/index.js").DisplayColumnDef<T, unknown>;
 export declare const createStaticTable: <TData>(columns: ColumnDef<TData, any>[], data: TData[]) => import("./adapter/index.js").Table<TData>;
+export declare const isValidPage: (value: number | undefined) => value is number;
+export declare const isValidPageSize: (value: number | undefined) => value is number;
 export declare const getPageLimit: (urlSearchParams: URLSearchParams) => number;
 export declare const getPage: (urlSearchParams: URLSearchParams) => number;
 export declare const sanitizeFilters: (filterParams: string[]) => Filter[];
+export declare const isPagePagination: (pagination: Pagination) => pagination is PagePagination;
+export declare const isCursorPagination: (pagination: Pagination) => pagination is CursorPagination;

package/dist/components/table/utils.js

@@ -58,17 +58,15 @@ export const createStaticTable = (columns, data) => {
         renderFallbackValue: null
     });
 };
+export const isValidPage = (value) => value !== undefined && Number.isInteger(value) && value > 0;
+export const isValidPageSize = (value) => value !== undefined && DEFAULT_ITEMS_PER_PAGE_OPTIONS.includes(value);
 export const getPageLimit = (urlSearchParams) => {
-    const limitParam = urlSearchParams.get('limit');
-    const limit = Number(limitParam);
-    const isLimitValid = !Number.isNaN(limit) && DEFAULT_ITEMS_PER_PAGE_OPTIONS.includes(limit);
-    return isLimitValid ? limit : DEFAULT_PAGE_LIMIT;
+    const limit = Number(urlSearchParams.get('limit'));
+    return isValidPageSize(limit) ? limit : DEFAULT_PAGE_LIMIT;
 };
 export const getPage = (urlSearchParams) => {
-    const pageParam = urlSearchParams.get('page');
-    const page = Number(pageParam);
-    const isPageValid = pageParam && !Number.isNaN(page) && page > 0;
-    return isPageValid ? page : DEFAULT_PAGE;
+    const page = Number(urlSearchParams.get('page'));
+    return isValidPage(page) ? page : DEFAULT_PAGE;
 };
 export const sanitizeFilters = (filterParams) => {
     return filterParams
@@ -100,3 +98,5 @@ const isValidFilter = (column, operator, value) => {
 const isValidOperation = (operation) => {
     return Object.values(Operation).includes(operation);
 };
+export const isPagePagination = (pagination) => 'currentPage' in pagination;
+export const isCursorPagination = (pagination) => 'nextCursor' in pagination || 'prevCursor' in pagination;

package/dist/components/tabs/Tabs.svelte

@@ -30,7 +30,7 @@
 					aria-controls="panel-{tab.index}"
 					tabindex={isActiveTab ? 0 : -1}
 					type="button"
-					class:active={isActiveTab}
+					class={isActiveTab ? 'active spi-text-semibold-3' : 'spi-text-medium-3'}
 					onclick={handleClick(tab.index)}
 				>
 					{tab.label}
@@ -42,7 +42,7 @@
 	{#each tabs as tab, index (index)}
 		{#if activeTab === tab.index}
 			<div
-				class={['tabs-content', !tab.disablePadding && 'padding']}
+				class={['tabs-content', 'spi-text-regular-4', !tab.disablePadding && 'padding']}
 				id="panel-{tab.index}"
 				role="tabpanel"
 				aria-labelledby="tab-{tab.index}"
@@ -67,40 +67,37 @@
 
 	.tabs-list {
 		display: flex;
-		gap: 16px;
-		border-bottom: 1px solid #e0e5e8;
-		padding: 0 24px;
+		gap: var(--spi-size-4);
+		border-bottom: var(--spi-border-1) solid var(--spi-color-border-default);
+		padding: 0 var(--spi-size-6);
 	}
 
 	.tabs-list button {
-		border-radius: 8px;
-		background-color: #fff;
-		padding: 20px 16px 20px;
+		border-radius: var(--spi-rounded-lg);
+		background-color: var(--spi-color-surface-default);
+		padding: var(--spi-size-5) var(--spi-size-4);
 		position: relative;
 		border: none;
-		font-size: 16px;
-		font-weight: 500;
 	}
 
 	.tabs-list button:hover {
-		background-color: #f4f6f8;
+		background-color: var(--spi-color-surface-subtle);
 		cursor: pointer;
 	}
 
 	.tabs-list button.active {
-		color: #472aff;
-		font-weight: 600;
+		color: var(--spi-color-primary-base);
 	}
 
 	.tabs-list button::after {
 		content: '';
 		position: absolute;
 		left: 50%;
-		bottom: -2px;
+		bottom: calc(-1 * var(--spi-border-2));
 		width: 0;
-		height: 4px;
-		background-color: #472aff;
-		border-radius: 8px;
+		height: var(--spi-size-1);
+		background-color: var(--spi-color-primary-base);
+		border-radius: var(--spi-rounded-lg);
 		transform: translateX(-50%);
 	}
 
@@ -113,15 +110,14 @@
 		width: 100%;
 		height: 100%;
 		position: relative;
-		border-radius: 0px 0px 16px 16px;
+		border-radius: 0 0 var(--spi-rounded-2xl) var(--spi-rounded-2xl);
 		overflow-wrap: break-word;
 		box-sizing: border-box;
 		min-height: 300px;
 		text-align: left;
-		font-size: 18px;
 	}
 
 	.padding {
-		padding: 24px;
+		padding: var(--spi-size-6);
 	}
 </style>

package/dist/components/toast/Toast.svelte

@@ -28,7 +28,7 @@
 			<div class="toast" in:fly={transitionConfig} out:fly={transitionConfig}>
 				<span class="status-indicator {toast.type}"></span>
 				<div class="toast-content-container">
-					<div class="toast-content">
+					<div class="toast-content spi-text-regular-2">
 						<span>{toast.message}</span>
 						{#if toast.link}
 							<a class="toast-content-link" href={toast.link} title="View details"
@@ -53,12 +53,12 @@
 <style>
 	.toast-container {
 		position: fixed;
-		top: 96px;
-		right: 16px;
+		top: var(--spi-size-24);
+		right: var(--spi-size-4);
 		z-index: 9999;
 		display: flex;
 		flex-direction: column;
-		gap: 16px;
+		gap: var(--spi-size-4);
 		align-items: flex-end;
 	}
 
@@ -66,17 +66,14 @@
 		min-width: 400px;
 		max-width: 600px;
 		width: fit-content;
-		min-height: 52px;
+		min-height: var(--spi-size-14);
 		display: inline-flex;
-		padding: 8px;
-		gap: 16px;
-		border-radius: 8px;
-		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);
+		padding: var(--spi-size-2);
+		gap: var(--spi-size-4);
+		border-radius: var(--spi-rounded-lg);
+		border: var(--spi-border-1) solid var(--spi-color-border-default);
+		background: var(--spi-color-surface-default);
+		box-shadow: var(--spi-shadow-card);
 	}
 
 	.toast-content {
@@ -84,55 +81,55 @@
 		justify-content: space-between;
 		flex-direction: row;
 		flex-wrap: wrap;
-		gap: 8px;
-		padding: 8px 0px;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
+		gap: var(--spi-size-2);
+		padding: var(--spi-size-2) 0;
 		align-items: center;
 	}
 
 	.toast-content-container {
 		display: flex;
 		align-items: center;
-		gap: 16px;
+		gap: var(--spi-size-4);
 		flex-grow: 1;
 	}
 
 	.status-indicator {
-		width: 8px;
+		width: var(--spi-size-2);
 		align-self: stretch;
 		flex-shrink: 0;
-		border-radius: 4px;
+		border-radius: var(--spi-rounded-sm);
 		background-color: var(--toast-bg);
 	}
 
 	.toast-content-link {
 		display: flex;
 		align-items: center;
-		color: #2b1999;
+		color: var(--spi-color-primary-darker);
 	}
 
 	.toast-content-link:hover {
-		color: #472aff;
+		color: var(--spi-color-primary-base);
 		text-decoration: underline;
 	}
 
 	.status-indicator.info {
-		--toast-bg: #472aff;
+		--toast-bg: var(--spi-color-primary-base);
 	}
 
 	.status-indicator.warning {
-		--toast-bg: #e87d1e;
+		--toast-bg: var(--spi-color-warning-base);
 	}
+
 	.status-indicator.danger {
-		--toast-bg: #dc182c;
+		--toast-bg: var(--spi-color-danger-base);
 	}
+
 	.status-indicator.neutral {
-		--toast-bg: #6b7180;
+		--toast-bg: var(--spi-color-neutral-base);
 	}
+
 	.status-indicator.success {
-		--toast-bg: #008556;
+		--toast-bg: var(--spi-color-success-base);
 	}
 
 	.toast-close-container {
@@ -147,7 +144,7 @@
 
 	.toast-close-button:hover {
 		cursor: pointer;
-		color: #434952;
+		color: var(--spi-color-text-secondary);
 	}
 
 	.toast-close-button:focus {

package/dist/components/tooltip/Tooltip.svelte

@@ -51,7 +51,7 @@
 
 	{#if isVisible && content}
 		<div
-			class="tooltip tooltip-{position} tooltip-{width} {customClass}"
+			class="tooltip tooltip-{position} tooltip-{width} {customClass} spi-text-regular-2"
 			in:fly={transitionConfig}
 			out:fly={transitionConfig}
 			role="tooltip"
@@ -76,15 +76,12 @@
 	.tooltip {
 		position: absolute;
 		z-index: 1000;
-		padding: 8px 12px;
-		border-radius: 6px;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
+		padding: var(--spi-size-2) var(--spi-size-3);
+		border-radius: var(--spi-rounded-md);
 		text-align: center;
 		pointer-events: none;
-		background-color: #25282d;
-		color: #ffffff;
+		background-color: var(--spi-color-neutral-darkest);
+		color: var(--spi-color-text-inverse);
 		white-space: normal;
 	}
 
@@ -101,66 +98,65 @@
 	}
 
 	.tooltip-top {
-		bottom: calc(100% + 12px);
+		bottom: calc(100% + var(--spi-size-3));
 		left: 50%;
 		transform: translateX(-50%);
 	}
 
 	.tooltip-bottom {
-		top: calc(100% + 12px);
+		top: calc(100% + var(--spi-size-3));
 		left: 50%;
 		transform: translateX(-50%);
 	}
 
 	.tooltip-left {
 		top: 50%;
-		right: calc(100% + 12px);
+		right: calc(100% + var(--spi-size-3));
 		transform: translateY(-50%);
 	}
 
 	.tooltip-right {
 		top: 50%;
-		left: calc(100% + 12px);
+		left: calc(100% + var(--spi-size-3));
 		transform: translateY(-50%);
 	}
 
 	.tooltip-arrow {
 		position: absolute;
-		border: 6px solid transparent;
+		border: var(--spi-border-5) solid transparent;
 	}
 
 	.tooltip-arrow-top {
 		top: 100%;
 		left: 50%;
 		transform: translateX(-50%);
-		border-top-color: #25282d;
+		border-top-color: var(--spi-color-neutral-darkest);
 	}
 
 	.tooltip-arrow-bottom {
 		bottom: 100%;
 		left: 50%;
 		transform: translateX(-50%);
-		border-bottom-color: #25282d;
+		border-bottom-color: var(--spi-color-neutral-darkest);
 	}
 
 	.tooltip-arrow-left {
 		top: 50%;
 		left: 100%;
 		transform: translateY(-50%);
-		border-left-color: #25282d;
+		border-left-color: var(--spi-color-neutral-darkest);
 	}
 
 	.tooltip-arrow-right {
 		top: 50%;
 		right: 100%;
 		transform: translateY(-50%);
-		border-right-color: #25282d;
+		border-right-color: var(--spi-color-neutral-darkest);
 	}
 
 	@media (max-width: 768px) {
 		.tooltip {
-			font-size: 11px;
-			padding: 6px 10px;
+			padding: var(--spi-size-1) var(--spi-size-2);
 		}
 	}
 </style>

package/dist/components/waffle/Waffle.svelte

@@ -39,7 +39,7 @@
 		aria-labelledby="waffle-title"
 		aria-modal="true"
 	>
-		<h2 class="waffle-title">SoftwareOne Cloud</h2>
+		<h2 class="waffle-title spi-text-semibold-2">SoftwareOne Cloud</h2>
 
 		<div class="waffle-content">
 			<ul class="waffle-grid" role="list">
@@ -57,7 +57,7 @@
 	.waffle-backdrop {
 		position: fixed;
 		inset: 0;
-		background: rgba(243, 244, 246, 0.5);
+		background: var(--spi-color-backdrop);
 		cursor: pointer;
 		z-index: 30;
 	}
@@ -66,31 +66,27 @@
 		position: absolute;
 		display: flex;
 		flex-direction: column;
-		border-radius: 8px;
-		background: #fff;
-		box-shadow:
-			0 10px 15px -3px rgba(0, 0, 0, 0.1),
-			0 4px 6px -2px rgba(0, 0, 0, 0.05);
-		top: 80px;
+		border-radius: var(--spi-rounded-lg);
+		background: var(--spi-color-surface-default);
+		box-shadow: var(--spi-shadow-dropdown);
+		top: var(--spi-size-20);
 		left: 0;
 		z-index: 40;
 		width: 600px;
 	}
 
 	.waffle-content {
-		padding: 20px 24px 24px 24px;
+		padding: var(--spi-size-5) var(--spi-size-6) var(--spi-size-6) var(--spi-size-6);
 	}
 
 	.waffle-title {
-		padding: 24px 24px 0 24px;
-		font-size: 14px;
-		font-weight: 600;
+		padding: var(--spi-size-6) var(--spi-size-6) 0 var(--spi-size-6);
 		text-align: center;
 	}
 
 	.waffle-grid {
 		display: grid;
 		grid-template-columns: repeat(3, 1fr);
-		gap: 16px;
+		gap: var(--spi-size-4);
 	}
 </style>

package/dist/components/waffle/WaffleItems.svelte

@@ -10,7 +10,7 @@
 
 <button type="button" onclick={onclickwaffleitems} class="waffle-item-button">
 	<img src={iconUrl} alt="" aria-hidden="true" class="waffle-item-img" />
-	<h3 class="waffle-title">
+	<h3 class="waffle-title spi-text-medium-2">
 		{title}
 	</h3>
 </button>
@@ -24,39 +24,36 @@
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		border-radius: 8px;
+		border-radius: var(--spi-rounded-lg);
 		text-align: center;
 		border: none;
 		background: transparent;
 		cursor: pointer;
-		transition: background-color 0.2s ease-in-out;
+		transition: background-color var(--spi-duration-normal) var(--spi-ease-in-out);
 	}
 
 	.waffle-item-button:hover {
-		background: #f4f6f8;
+		background: var(--spi-color-surface-subtle);
 	}
 
 	.waffle-item-button:focus,
 	.waffle-item-button:focus-visible {
-		background: #eaecff;
+		background: var(--spi-color-primary-lighter);
 	}
 
 	.waffle-item-img {
-		width: 40px;
-		height: 40px;
-		margin-bottom: 12px;
+		width: var(--spi-size-10);
+		height: var(--spi-size-10);
+		margin-bottom: var(--spi-size-3);
 		filter: invert(27%) sepia(99%) saturate(4729%) hue-rotate(240deg) brightness(101%)
 			contrast(106%);
 	}
 
 	.waffle-title {
-		color: #000;
-		font-weight: 500;
-		font-size: inherit;
+		color: var(--spi-color-text-primary);
 		word-break: break-words;
-		line-height: 1.25;
 		text-align: center;
-		padding: 0 4px;
+		padding: 0 var(--spi-size-1);
 		margin: 0;
 	}
 </style>

package/dist/styles/index.css

@@ -0,0 +1,3 @@
+@import './tokens/index.css';
+@import './reset.css';
+@import './utilities.css';

package/dist/styles/reset.css

@@ -0,0 +1,19 @@
+*,
+*::before,
+*::after {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+ul,
+ol,
+li,
+summary {
+	list-style: none;
+}
+
+a {
+	text-decoration: none;
+	color: inherit;
+}

package/dist/styles/tokens/index.css

@@ -0,0 +1,2 @@
+@import './primitives/index.css';
+@import './semantic/index.css';

package/dist/styles/tokens/primitives/borders.css

@@ -0,0 +1,17 @@
+:root {
+	--spi-border-1: 1px;
+	--spi-border-2: 2px;
+	--spi-border-3: 3px;
+	--spi-border-4: 4px;
+	--spi-border-5: 5px;
+
+	--spi-rounded-none: 0;
+	--spi-rounded-xs: 2px;
+	--spi-rounded-sm: 4px;
+	--spi-rounded-md: 6px;
+	--spi-rounded-lg: 8px;
+	--spi-rounded-xl: 12px;
+	--spi-rounded-2xl: 16px;
+	--spi-rounded-3xl: 24px;
+	--spi-rounded-full: 9999px;
+}

package/dist/styles/tokens/primitives/colors.css

@@ -0,0 +1,41 @@
+:root {
+	--spi-color-violet-1: #eaecff;
+	--spi-color-violet-2: #959bff;
+	--spi-color-violet-3: #472aff;
+	--spi-color-violet-4: #3520bf;
+	--spi-color-violet-5: #2b1999;
+
+	--spi-color-red-1: #fce8ea;
+	--spi-color-red-2: #ee8c96;
+	--spi-color-red-3: #dc182c;
+	--spi-color-red-4: #bb1425;
+	--spi-color-red-5: #8f101d;
+
+	--spi-color-gray-1: #f4f6f8;
+	--spi-color-gray-2: #e0e5e8;
+	--spi-color-gray-3: #aeb1b9;
+	--spi-color-gray-4: #6b7180;
+	--spi-color-gray-5: #434952;
+	--spi-color-gray-6: #25282d;
+
+	--spi-color-green-1: #e6f9f2;
+	--spi-color-green-2: #80e1ae;
+	--spi-color-green-3: #008556;
+	--spi-color-green-4: #00784d;
+	--spi-color-green-5: #005838;
+
+	--spi-color-blue-1: #cae4ff;
+	--spi-color-blue-2: #4da6ff;
+	--spi-color-blue-3: #2775c4;
+	--spi-color-blue-4: #1f5c99;
+	--spi-color-blue-5: #174475;
+
+	--spi-color-orange-1: #fdf2e9;
+	--spi-color-orange-2: #f1b178;
+	--spi-color-orange-3: #e87d1e;
+	--spi-color-orange-4: #733f11;
+	--spi-color-orange-5: #4d2a0b;
+
+	--spi-color-white: #ffffff;
+	--spi-color-black: #000000;
+}

package/dist/styles/tokens/primitives/index.css

@@ -0,0 +1,7 @@
+@import './borders.css';
+@import './colors.css';
+@import './motion.css';
+@import './opacity.css';
+@import './shadows.css';
+@import './sizing.css';
+@import './typography.css';

package/dist/styles/tokens/primitives/motion.css

@@ -0,0 +1,11 @@
+:root {
+	--spi-duration-fast: 100ms;
+	--spi-duration-normal: 200ms;
+	--spi-duration-slow: 300ms;
+	--spi-duration-slower: 500ms;
+
+	--spi-ease-default: ease;
+	--spi-ease-in: ease-in;
+	--spi-ease-out: ease-out;
+	--spi-ease-in-out: ease-in-out;
+}

package/dist/styles/tokens/primitives/opacity.css

@@ -0,0 +1,6 @@
+:root {
+	--spi-opacity-0: 0;
+	--spi-opacity-50: 0.5;
+	--spi-opacity-100: 1;
+	--spi-opacity-disabled: 0.4;
+}

package/dist/styles/tokens/primitives/shadows.css

@@ -0,0 +1,11 @@
+:root {
+	--spi-shadow-sm: 0 1px 16px 0 rgba(107, 113, 128, 0.1), 0 1px 3px 0 rgba(107, 113, 128, 0.2);
+
+	--spi-shadow-md:
+		0 1px 10px 0 rgba(51, 56, 64, 0.12), 0 2px 4px -1px rgba(51, 56, 64, 0.2),
+		0 4px 5px 0 rgba(51, 56, 64, 0.14);
+
+	--spi-shadow-lg:
+		0 4px 5px 0 rgba(51, 56, 64, 0.15), 0 1px 3px 0 rgba(51, 56, 64, 0.2),
+		0 1px 16px 0 rgba(51, 56, 64, 0.1);
+}

package/dist/styles/tokens/primitives/sizing.css

@@ -0,0 +1,19 @@
+:root {
+	--spi-size-1: 4px;
+	--spi-size-2: 8px;
+	--spi-size-3: 12px;
+	--spi-size-4: 16px;
+	--spi-size-5: 20px;
+	--spi-size-6: 24px;
+	--spi-size-7: 28px;
+	--spi-size-8: 32px;
+	--spi-size-9: 36px;
+	--spi-size-10: 40px;
+	--spi-size-11: 44px;
+	--spi-size-12: 48px;
+	--spi-size-14: 56px;
+	--spi-size-16: 64px;
+	--spi-size-18: 72px;
+	--spi-size-20: 80px;
+	--spi-size-24: 96px;
+}

package/dist/styles/tokens/primitives/typography.css

@@ -0,0 +1,13 @@
+:root {
+	--spi-font-size-xs: 0.75rem; /* 12px */
+	--spi-font-size-sm: 0.875rem; /* 14px */
+	--spi-font-size-md: 1rem; /* 16px */
+	--spi-font-size-lg: 1.125rem; /* 18px */
+	--spi-font-size-xl: 1.25rem; /* 20px */
+	--spi-font-size-2xl: 1.5rem; /* 24px */
+
+	--spi-font-weight-regular: 400;
+	--spi-font-weight-medium: 500;
+	--spi-font-weight-semibold: 600;
+	--spi-font-weight-bold: 700;
+}